[Flutter]FloatingActionButtonを横に複数並べる方法

どうも、ちょげ(@chogetarou)です。

FloatinActionButtonを横に複数並べる方法を紹介します。

方法

FloatingActionButtonを横に複数並べるには、Rowウェジェットを使います。

まず、Scaffoldの引数「floatingActionButton」に、「Rowウェジェット」を指定します。

次に、「Rowウェジェット」の引数「mainAxisSize」に「MainAxisSize.min」を指定します。

これはレイアウトを崩さないためです。

最後に、Rowウェジェットの引数「children」に、並べたいFloatingActionButtonをカンマ区切りで複数指定します。

Scaffold(
  body: Column(),
  floatingActionButton: Row(
    mainAxisSize: MainAxisSize.min,
    children: [
      FloatingActionButton(onPressed: () {}),
      SizedBox(width: 10),
      FloatingActionButton(onPressed: () {}),
      SizedBox(width: 10),
      FloatingActionButton(onPressed: () {}),
      SizedBox(width: 10),
    ],
  ),
)