LoginSignup
3

More than 3 years have 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
  3. You can use dark theme
What you can do with signing up
3