【Widget of the Week】#8 FloatingActionButton

【#8 FloatingActionButton】動画

【#8 FloatingActionButton】概要

FloatingActionButtonの追加は簡単!

FloatingActionButtonのレイアウトはどうやったら変えられる?

【#8 FloatingActionButton】解説

①FloatingActionButtonの追加は簡単!

FloatingActionButtonを追加するのはとても簡単です。

ScaffoldのfloatingActionButtonプロパティに設定してあげるだけで表示されます。

②FloatingActionButtonのレイアウトはどうやったら変えられる?

上記画像のようにBottomNavigationBarの中心で重なるようにしたいなど、FloatingActionButtonの表示位置を変えたい時はどうしたらいいのでしょう?

  1. BottomAppBarを使おう!

ScaffoldのbottomNavigationBarプロパティにBottomAppBarを設定しましょう。

今回はBottomAppBarについての詳しい説明は省略しますが、画面最下部にウィジェットを配置することでナビゲーションバーを自作することができたりします。

BottomAppBarについての詳しい情報はこちら(公式ドキュメント)

2. FloatingActionButtonの表示位置を決めよう!

ScaffoldのfloatingActionButtonLocationプロパティに表示したい位置を設定してあげましょう。

【#8 FloatingActionButton】サンプルコード① (基本的なプロパティ)

①child

型:Widget
ボタン内に表示するウィジェットを設定できる。

②backgroundColor

型:Color
ボタンの色を設定できる。

②hoverColor

型:Color
ボタンにカーソルを合わせた時の色を指定できる

②tooltip

型:String
ボタンの機能を説明するテキストを設定できる。

②onPressed

型:VoidCallback
ボタン押下時に実行する関数を設定できる。

※詳細はこちら(公式ドキュメント)

See the Pen
FloatingActionButton
by RyomaArisawa (@ryoma-arisawa)
on CodePen.

投稿者プロフィール

ArisawaRyoma
社会人歴2年目の駆け出しエンジニアです。

学生の時はがっつり文系(=遊んだただけ)でほぼPCに触れずに生きてきたので、プログラミングは日々勉強中。Vue / React / Django / Springなど色々浮気して今はFlutterにハマってます。

趣味は海外旅行、釣り、卓球など。

Twitterでも色々発信してるので良ければフォローお願いします。

関連記事

  1. 【Widget of the Week】#9 PageView

  2. 【予告】Widget of the Week 解説スタート!

  3. 【Widget of the Week】#1 Safe Area

  4. 【Widget of the Week】#5 Opacity

  5. 【Widget of the Week】#6 FutureBuilde…

  6. 【Widget of the Week】#10 Table