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

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

FloatingActionButtonを縦に複数並べる方法を紹介します。

方法

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

まず、Scaffoldの引数「floatingActionButton」に、Columnを指定します。

次に、Columnの引数「mainAxisSize」に、「MainAxisSize.min」を設定します。

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

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