- 【#8 FloatingActionButton】動画
- 【#8 FloatingActionButton】概要
- 【#8 FloatingActionButton】解説
- 【#8 FloatingActionButton】サンプルコード①（基本的なプロパティ）
【#8 FloatingActionButton】動画
【#8 FloatingActionButton】概要
【#8 FloatingActionButton】解説
①FloatingActionButtonの追加は簡単！
FloatingActionButtonを追加するのはとても簡単です。
ScaffoldのfloatingActionButtonプロパティに設定してあげるだけで表示されます。
②FloatingActionButtonのレイアウトはどうやったら変えられる？
上記画像のようにBottomNavigationBarの中心で重なるようにしたいなど、FloatingActionButtonの表示位置を変えたい時はどうしたらいいのでしょう？
- 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.
投稿者プロフィール
-
社会人歴２年目の駆け出しエンジニアです。
学生の時はがっつり文系（＝遊んだただけ）でほぼPCに触れずに生きてきたので、プログラミングは日々勉強中。Vue / React / Django / Springなど色々浮気して今はFlutterにハマってます。
趣味は海外旅行、釣り、卓球など。
Twitterでも色々発信してるので良ければフォローお願いします。
