今回は、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について書いています!

