Flutter　FloatingActionButtonを横に複数並べるサンプル

2023年9月30日

環境
Windows11 pro 64bit
Flutter 3.3.7

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

作成方法
1.Scaffoldの引数「floatingActionButton」に、「Rowウェジェット」を指定します。
floatingActionButton: Row(xxx)

2.「Rowウェジェット」の引数「mainAxisSize」に「MainAxisSize.min」を指定します。
mainAxisSize: MainAxisSize.min
3.引数「children」に、並べたいFloatingActionButtonをカンマ区切りで複数指定します。

使用例

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

Flutter

Posted by arkgame

関連記事: