今回は、Flutterで画面右下にボタン(floatingActionButton)を実装する方法をご紹介します。
目次
floatingActionButtonとは？
floatingActionButtonとは、画面右下にあるボタンのことです。
またこのfloatingActionButtonは、画面をスクロールしても、追従してくるのが特徴です。
常にボタンを右下に配置して、何かしらの機能を付けていきたいというときに実装するものです。
実装をすると、以下の画面のようになります。
画面右下についている青いボタンが、今回紹介するfloatingActionButtonです。
今回も非常にシンプル！
前回紹介した、appBarのコードにたった１〜２行追加するだけで実装できちゃいます！
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)という１行の変更で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について書いています！
