【Flutter】FloatingActionButton|Scaffoldのボタンウィジェット

今回はFloatingActionButtonの基本的な使い方を紹介します。

FloatingActionButtonは画面上に浮かぶScaffoldのボタンウィジェットです。

\ 世界最大級のオンライン学習サービス /

目次

FloatingActionButtonの使い方

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

FloatingActionButtonScaffoldfloatingActionButtonの引数として使用します。

前景色・背景色

FloatingActionButton(
  foregroundColor: Colors.blue,
  backgroundColor: Colors.red,
),

前景色と背景色はそれぞれforegroundColorbackgroundColorで指定できます。

タップエフェクト

FloatingActionButton(
  splashColor: Colors.pink,
),

タップイベント時の反応色はsplashColorで指定できます。

デフォルトの表示位置を変更

Scaffold(
  floatingActionButton: FloatingActionButton(
    child: Icon(Icons.add),
    onPressed: () {},
  ),
  floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
),

FloatingActionButtonの表示位置はScaffoldfloatingActionButtonLocationで指定できます。

一緒に読みたい

参考

  • URLをコピーしました!
目次