LoginSignup
3

More than 1 year has passed since last update.

[Flutter] floatingActionButton を複数表示する方法(※Material Design非推奨)

Posted at

floatingAnctionButton(以下FAB)を1画面に複数設置したい場合のサンプルです。
ただし、Material Design では、FABは画面内の主要、または最も一般的な操作を表現するためのものとされているため「原則1画面に1つ」が推奨されています。
特別な理由がない場合は大事なアクションをFAB、他方は通常のボタンにした方がMaterial Design に沿ったものになります。
参考※1のMaterial Design公式ではFAB2つで「Caution」、3つで「Don't」とされていますね。。

以下にサンプルを記載します。
参考※2のflutter.devの通り、Scaffoldの中でappBar, bodyと一緒に記述します。

Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(centerTitle: true, title: Text('Title')),
    body: // (省略)
    floatingActionButton: Column(
      verticalDirection: VerticalDirection.up, // childrenの先頭が下に配置されます。
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        // 1つ目のFAB
        FloatingActionButton(
          // 参考※3よりユニークな名称をつけましょう。ないとエラーになります。
          // There are multiple heroes that share the same tag within a subtree.
          heroTag: "search",
          child: Icon(Icons.search),
          backgroundColor: Colors.blue[200],
          onPressed: () async {
            // (省略)タップされた際の処理
          },
        ),
        // 2つ目のFAB
        Container( // 余白を設けるためContainerでラップします。
          margin: EdgeInsets.only(bottom: 16.0),
          child: FloatingActionButton(
            // 参考※3よりユニークな名称をつけましょう。ないとエラーになります。
            heroTag: "scan",
            child: Icon(MdiIcons.barcodeScan),
            backgroundColor: Colors.pink[200],
            onPressed: () async {
              // (省略)タップされた際の処理
            },
          ),
        ),
      ],
    ),
  );
}

参考

※1 Material Design Buttons: floating action button
※2 flutter.dev FloatingActionButton class
※3 [Flutter]2つ以上のFloatingActionButtonを使った場合の画面遷移の注意点

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
3