すらぼうの開発ノート

flutterエンジニアのメモ

【Flutter】FloatingActionButtonを複数表示する方法

本エントリでは

floatingActionButtonを複数表示する方法

を以下の流れで説明する。


floatingActionButtonとは

api.flutter.dev

floatingActionButtonはMaterialデザインのfloating action buttonを実装するウィジェット

基本的に画面右下に配置されており、位置が固定されて表示されることが多い。

またボイラープレートのカウンターアプリでも画面右下に表示されている基本的なUIアイテム。

floatingActionButton


floatingActionButtonを1個表示する

まず1つfloatingActionButtonを表示する方法を説明する。 大抵のケースではScaffoldウィジェットのプロパティとして扱うことが多い。

floatingActionButton

上画像の様なfloatingActionButtonを表示する場合、以下の様に記述する。

[補足] floatingActionButtonに文字列を表示したいケース

このケースではfloatingActionButtonchildTextウィジェットをそのまま指定しない方が良い。 というのも、ボタンの形状が文字列サイズに対応しないため、文字が全て表示されないケースがある。

例として次のように記述したとする。

すると実際の表示は次の様になってしまう。

文字列をfloatingAcitonButtonに表示

このような表示を避けるためFloatingActionButton.extended()を使用した方がよい。 コードは次の様になる。

表示は次の画像の様になる。

FloatingActionButton.extended()

詳しくは以下のエントリを参照。

note-tmk.hatenablog.com


floatingActionButtonを複数個表示する

次にfloatingActionButtonを複数個表示する方法を並べる方向ごとに説明する。

垂直方向に配置する: Column()

垂直方向に並べたい場合はColumn()ウィジェットを使う。 実際の表示とコードは以下の様になる。

垂直方向に配置

ポイントは次の通り。

  • 画面下に配置したい場合、mainAxisAlignment: MainAxisAlignment.end
  • FloatingActionButton間にはSizedBoxなどで隙間を開けた方が見やすい

水平方向に配置する: Row()

水平方向に並べたい場合はRow()ウィジェットを使う。 実際の表示とコードは以下の様になる。

水平方向に配置

ポイントは次の通り。

  • 画面右下に配置したい場合、mainAxisAlignment: MainAxisAlignment.end
  • FloatingActionButton間にはSizedBoxなどで隙間を開けた方が見やすい

画面下の両端に配置する

画面下の両端に配置する場合、少し工夫が必要になる。 結論から述べるとStackウィジェットを用いると綺麗にFloatingActionButtonを配置することができる。

Stackで配置したパターン(成功例)

実際の表示とコードは以下。

stackを使用して画面下両端に配置

ポイントは次の通り。

mainAxisAlignmentで位置を調整したパターン(失敗例)

水平方向に配置する方法と同じようにmainAxisAlignmentで配置を調整しようとするとうまくいかない。

mainAxisAlignment: MainAxisAlignment.spaceAround

mainAxisAlignment: MainAxisAlignment.spaceBetween

mainAxisAlignment: MainAxisAlignment.spaceEvenly

mainAxisAlignment: MainAxisAlignment.center

複数個FloatingActionButtonを表示する際の注意点

FloatingActionButtonウィジェットを複数個表示する場合、heroTagプロパティを設定する方が良い。 設定しない場合、ページ遷移した際に次のようなエラーが表示される場合がある。

There are multiple heroes that share the same tag within a subtree.

そこで各FloatingActionButtonウィジェットheroTagプロパティにユニークな文字列を渡すことで上記エラーが表示されなくなる。