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 {
// (省略)タップされた際の処理
},
),
),
],
),
);
}