[Flutter]FloatingActionButtonでポップアップメニュー(popup menu)を表示する方法

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

FloatingActionButtonでポップアップメニューを表示する方法を紹介します。

方法
まとめ

方法

プログラマー, プログラミング, コード, 仕事, コンピューター, インターネット, テクノロジー

FloatingActionButtonでポップアップメニューを表示するには、「flutter_speed_dial」パッケージを使用します。

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

dependencies:
  flutter_speed_dial: ^3.0.5

次に、使用するファイルで、パッケージをインポートします。

import 'package:flutter_speed_dial/flutter_speed_dial.dart';

最後に、SpeedDialウェジェットを実装します。

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(),
      floatingActionButton: SpeedDial(
        animatedIcon: AnimatedIcons.menu_close,
        backgroundColor: Colors.pink,
        closeManually: true,
        children: [
          SpeedDialChild(
            child: Icon(Icons.share_rounded),
            label: '共有',
            backgroundColor: Colors.blue,
            onTap: () {
              print('Share Tapped');
            },
          ),
          SpeedDialChild(
            child: Icon(Icons.mail),
            label: 'メール',
            backgroundColor: Colors.blue,
            onTap: () {
              print('Mail Tapped');
            },
          ),
          SpeedDialChild(
            child: Icon(Icons.copy),
            label: 'コピー',
            backgroundColor: Colors.blue,
            onTap: () {
              print('Copy Tapped');
            },
          ),
        ],
      ),
    );
  }