📖

【Flutter】Modal Bottom Sheet で綺麗なメニューを爆速で作る

2023/07/01に公開

Flutter

tech

Dart

tech

この記事では、modal_bottom_sheet パッケージで綺麗なメニューを作成します。もちろん、showModalBottomSheetで独自に実装することもできますが、手軽に Cupertino や Material なメニューをつくれることが modal_bottom_sheet の強みです。

簡単なパッケージ紹介になりますが、こんなパッケージがあるんだなと見ていただければと思います。

はじめに

ウェブ版デモ

どのようなメニューが作成できるかを、まずはウェブ版のデモページで確認してみてください。

パッケージの追加

最新版は Dart 2.x に対応しています。

flutter pub add modal_bottom_sheet

Dart 3.0 Compatible なバージョンが必要な場合は、pubspec.yamlで prerelease 版を指定してください。

modal_bottom_sheet: ^3.0.0-pre

実装例

Cupertino なメニュー

スクリーンショット:

コード:

showMaterialModalBottomSheet

    showCupertinoModalBottomSheet(
      context: context,
      builder: (context) => Material(
        child: SafeArea(
          top: false,
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              ListTile(
                title: const Text('設定とプライバシー'),
                leading: const Icon(Icons.settings),
                onTap: () => Navigator.of(context).pop(),
              ),
              ListTile(
                title: const Text('アクティビティ'),
                leading: const Icon(Icons.history),
                onTap: () => Navigator.of(context).pop(),
              ),
              ListTile(
                title: const Text('アーカイブ'),
                leading: const Icon(Icons.archive),
                onTap: () => Navigator.of(context).pop(),
              ),
            ],
          ),
        ),
      ),
    ),

Material なメニュー

スクリーンショット:

コード:

showMaterialModalBottomSheet

    showMaterialModalBottomSheet(
      context: context,
      builder: (context) => SafeArea(
        top: false,
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            ListTile(
              title: const Text('設定とプライバシー'),
              leading: const Icon(Icons.settings),
              onTap: () => Navigator.of(context).pop(),
            ),
            ListTile(
              title: const Text('アクティビティ'),
              leading: const Icon(Icons.history),
              onTap: () => Navigator.of(context).pop(),
            ),
            ListTile(
              title: const Text('アーカイブ'),
              leading: const Icon(Icons.archive),
              onTap: () => Navigator.of(context).pop(),
            ),
          ],
        ),
      ),
    ),

Bar 付き Material なメニュー

スクリーンショット:

コード:

showBarModalBottomSheet

    showBarModalBottomSheet(
      context: context,
      builder: (context) => SafeArea(
        top: false,
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            ListTile(
              title: const Text('設定とプライバシー'),
              leading: const Icon(Icons.settings),
              onTap: () => Navigator.of(context).pop(),
            ),
            ListTile(
              title: const Text('アクティビティ'),
              leading: const Icon(Icons.history),
              onTap: () => Navigator.of(context).pop(),
            ),
            ListTile(
              title: const Text('アーカイブ'),
              leading: const Icon(Icons.archive),
              onTap: () => Navigator.of(context).pop(),
            ),
          ],
        ),
      ),
    ),

パタメータ一覧

パラメータで各 Modal Bottom Sheet の動作を調整できます。

パラメータ	説明
bool expand = false	Modal Bottom Sheet がフルスクリーンサイズになるか (true)、Child に Fit するか (false)
bool useRootNavigator = false	Modal Bottom Sheet で Root Navigator を使うか
bool isDismissible = true	Modal Bottom Sheet の縁をタップして閉じれるか
Color barrierColor	Modal Bottom Sheet が表示されていない範囲の色
bool enableDrag = true	ドラッグで Modal Bottom Sheet の閉じれるか
AnimationController secondAnimation	Modal Route のアニメーションを指定、利用非推奨
bool bounce = false	Modal Bottom Sheet が上限を超えてドラッグできるか
Duration duration = const Duration(milliseconds: 400)	Modal Bottom Sheet が開く動作の時間
double closeProgressThreshold = 0.6	Modal Bottom Sheet をドラッグしたときに Dismiss されるタイミングを指定