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

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

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

方法

FloatingActionButtonを複数並べる方法は２つあります。

レイアウトのウェジェット

１つは、レイアウトに使うウェジェットを使う方法です。

ColumnウェジェットやRowウェジェット、Stackウェジェットなどを使うことで、複数並べることが出来ます。

Scaffoldの引数「floatingActionButton」は、FloatingActionButtonだけでなく、他のウェジェットを指定することができるからです。

以下は、ColumnウェジェットとRowウェジェットを使った例です。

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

ColumnやRowを使うときは、引数「mainAxisSize」に「MainAxisSize.min」を指定しましょう。

そうしないと、レイアウトが崩れてしまいます。

flutter_speed_dial

もう１つは、「flutter_speed_dial」パッケージを使う方法です。

まず、パッケージを「pubspec.yaml」ファイルで、導入します。

dependencies:
  flutter_speed_dial: ^3.0.5

次に、パッケージをインポートします。

import 'package:flutter_speed_dial/flutter_speed_dial.dart';

最後に、FloatingActionButtonに、SpeedDialウェジェットを指定します。

return Scaffold(
  body: Column(),
  floatingActionButton: SpeedDial(
    icon: Icons.share,
    backgroundColor: Colors.amber,
    children: [
      SpeedDialChild(
        child: Icon(Icons.face),
        label: 'ソーシャル',
        backgroundColor: Colors.amberAccent,
        onTap: () {},
      ),
      SpeedDialChild(
        child: Icon(Icons.email),
        label: 'メール',
        backgroundColor: Colors.amberAccent,
        onTap: () {},
      ),
      SpeedDialChild(
        child: Icon(Icons.chat),
        label: 'メッセージ',
        backgroundColor: Colors.amberAccent,
        onTap: () {},
      ),
    ],
  ),
);

SpeedDialを使うことで、アイコンボタンをタップすると、複数のアイコンボタンが表示されるようになります。

まとめ

FloatingActionButtonを複数並べる方法には、次の２つがあります。

• レイアウトのウェジェットを使う方法
• flutter_speed_dialパッケージを使う方法