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

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

floatingActionButtonとは？

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

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

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

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

今回も非常にシンプル！

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

floatingActionButtonの実装方法

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

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: ''),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("appBar"),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
      ),
    );
  }
}

この状態だと、floatingActionButtonは実装できますが、以下のようにただの青い丸になってしまいます。

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

floatingActionButtonのアイコンの実装方法

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

このように、child: Icon(Icons.add)という１行を追加してやります。

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

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

関連知識

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

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

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

機能の追加の仕方

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

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

まだFlutterを触り始めたばかりであり、少し難しいと思うので、一旦飛ばします。

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

まとめ

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

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

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

 

次の学習は、BottomNavigationBarです。

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

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

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