アプリ開発

Flutterで画面右下にボタンを実装する方法【floatingActionButton】

マーク
マーク
こんにちは。マークです!
チワプーとうふ
チワプーとうふ
こんにチワワ!

今回は、Flutterで画面右下にボタン(floatingActionButton)を実装する方法をご紹介します。

floatingActionButtonとは?

floatingActionButtonとは、画面右下にあるボタンのことです。

またこのfloatingActionButtonは、画面をスクロールしても、追従してくるのが特徴です。

常にボタンを右下に配置して、何かしらの機能を付けていきたいというときに実装するものです。

実装をすると、以下の画面のようになります。

画面右下についている青いボタンが、今回紹介するfloatingActionButtonです。

今回も非常にシンプル!

前回紹介した、appBarのコードにたった1〜2行追加するだけで実装できちゃいます!

floatingActionButtonの実装方法

追記

コードペンを導入しました!

 

See the Pen
FloatingActionButton
by maaku saitou (@makumaaku-the-selector)
on CodePen.

実際のコードを以下に示します。

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: MyWidget(),
    ),
  );
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        child: Text('ボタン'),
        onPressed: () {
          print('push');
        },
      ),
      body: Center(
        child: Text(
          'FAB',
          style: Theme.of(context).textTheme.headline4,
        ),
      ),
    );
  }
}

この状態だと、floatingActionButtonは実装できますが、FABという文字になっていると思います。

そこで、+アイコンをつけてやりましょう。

floatingActionButtonのアイコンの実装方法

floatingActionButton: FloatingActionButton(
        onPressed: () {},
        child: Icon(Icons.add),
      ),

このように、child: Icon(Icons.add)という1行の変更でOKです。

すると以下のように、floatingActionButtonの中のアイコンが+マークになります。

See the Pen
FloatingActionButton
by maaku saitou (@makumaaku-the-selector)
on CodePen.

+マークがボタンの中に追加されましたね!

コードペンではマップのピンのアイコンになってしまっていますが、flutter上では+アイコンです^^;

関連知識

FloatingActionButtonの中のアイコンを変えてみよう!

今回は+マークを実装したため、Icon(Icons.add)でしたが、他にも様々なマークを入れることができます。

AndroidStudioをお使いであれば、Icons.まで打つと、候補がたくさん出てきますよ!

機能の追加の仕方

この記事を読んでくださっているあなたは、ボタンを押した時の機能も実装したいはずです。

そんな時は、onPress(){この中に機能を書く!}

最初にあげた例では、ボタンを押すと「push」とログにプリントされるはずです。

まだFlutterを触り始めたばかりの方は、いろいろ試してみてください!

また他の記事で紹介していこうと思います!

マーク
マーク
とりあえずは画面のレイアウトから学ぶのがいいでしょう!

まとめ

いかがでしたでしょうか。

これであなたもfloatingActionButtonを実装できるようになりましたね!

あなたの参考になれば幸いです!

 

次の学習は、BottomNavigationBarです。

BottomNavigationBarとは、画面のしたにあるタブのことです。

ページを切り替えるためによく実装されているものです!

チワプーとうふ
チワプーとうふ
実装するとこんな感じだよ!

画面の下に画面を切り替えるためのタブが実装されていますね!

以下の記事で、BottomNavigationBarについて書いています!

【コピペOK】Flutterで画面下部のページ切り替えタブつける方法 今回は、Flutterで画面下部にBottomNavigationBarを実装する方法についてご紹介していきます。 スマホ...
flutterのBottomNavigationBarのタブが3つ以上で白くなる問題こんにちは。マークです。 今回はFlutterでBottomNavigationBarを使うにあたり直面した問題について解説してい...