本エントリでは
floatingActionButtonを複数表示する方法
を以下の流れで説明する。
floatingActionButtonとは
floatingActionButtonはMaterialデザインのfloating action buttonを実装するウィジェット。
基本的に画面右下に配置されており、位置が固定されて表示されることが多い。
またボイラープレートのカウンターアプリでも画面右下に表示されている基本的なUIアイテム。
floatingActionButtonを1個表示する
まず1つfloatingActionButtonを表示する方法を説明する。
大抵のケースではScaffoldウィジェットのプロパティとして扱うことが多い。
上画像の様なfloatingActionButtonを表示する場合、以下の様に記述する。
[補足] floatingActionButtonに文字列を表示したいケース
このケースではfloatingActionButtonのchildにTextウィジェットをそのまま指定しない方が良い。
というのも、ボタンの形状が文字列サイズに対応しないため、文字が全て表示されないケースがある。
例として次のように記述したとする。
すると実際の表示は次の様になってしまう。
このような表示を避けるためFloatingActionButton.extended()を使用した方がよい。
コードは次の様になる。
表示は次の画像の様になる。
詳しくは以下のエントリを参照。
floatingActionButtonを複数個表示する
次にfloatingActionButtonを複数個表示する方法を並べる方向ごとに説明する。
垂直方向に配置する: Column()
垂直方向に並べたい場合はColumn()ウィジェットを使う。
実際の表示とコードは以下の様になる。
ポイントは次の通り。
- 画面下に配置したい場合、
mainAxisAlignment: MainAxisAlignment.end FloatingActionButton間にはSizedBoxなどで隙間を開けた方が見やすい
水平方向に配置する: Row()
水平方向に並べたい場合はRow()ウィジェットを使う。
実際の表示とコードは以下の様になる。
ポイントは次の通り。
- 画面右下に配置したい場合、
mainAxisAlignment: MainAxisAlignment.end FloatingActionButton間にはSizedBoxなどで隙間を開けた方が見やすい
画面下の両端に配置する
画面下の両端に配置する場合、少し工夫が必要になる。
結論から述べるとStackウィジェットを用いると綺麗にFloatingActionButtonを配置することができる。
Stackで配置したパターン（成功例）
実際の表示とコードは以下。
ポイントは次の通り。
mainAxisAlignmentで位置を調整したパターン（失敗例）
水平方向に配置する方法と同じようにmainAxisAlignmentで配置を調整しようとするとうまくいかない。
複数個FloatingActionButtonを表示する際の注意点
FloatingActionButtonウィジェットを複数個表示する場合、heroTagプロパティを設定する方が良い。
設定しない場合、ページ遷移した際に次のようなエラーが表示される場合がある。
There are multiple heroes that share the same tag within a subtree.
そこで各FloatingActionButtonウィジェットのheroTagプロパティにユニークな文字列を渡すことで上記エラーが表示されなくなる。
