アプリ開発

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

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

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

floatingActionButtonとは?

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

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

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

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

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

今回も非常にシンプル!

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

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)という1行を追加してやります。

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

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

関連知識

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

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

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

機能の追加の仕方

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

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

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

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

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

まとめ

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

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

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

 

次の学習は、BottomNavigationBarです。

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

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

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

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