虎視眈々と

Flutter × Firebaseを研究するアプリエンジニア

FlutterでFloating Buttonをカスタマイズ

f:id:superman199323:20181112094509j:plain

FlutterでFloating Buttonをカスタマイズ

こんなやつを作ります。

導入

今回導入するライブラリはこちら

pub.dartlang.org

flutter_speed_dial: ^1.0.8

をpubspec.ymlに書いたら下記のコマンドを実行

flutter packages get

使い方

  Widget _actionFloatingButton() {
    return SpeedDial(
      animatedIcon: AnimatedIcons.menu_close,
      animatedIconTheme: IconThemeData(size: 22.0),
      curve: Curves.bounceIn,
      children: [
        SpeedDialChild(
            child: Icon(Icons.create),
            backgroundColor: Colors.blue,
            label: "グループを作成する",
            onTap: () {
            },
            labelStyle:
                TextStyle(fontWeight: FontWeight.w500, color: Colors.black)),
        SpeedDialChild(
            child: Icon(Icons.person_add),
            backgroundColor: Colors.green,
            label: "グループに参加する",
            onTap: () {
            },
            labelStyle:
                TextStyle(fontWeight: FontWeight.w500, color: Colors.black)),
      ],
    );
  }

このメソッドをfloatingボタンに設定すればできます。

      appBar: _appbar(),
      floatingActionButton: _actionFloatingButton(),
    );