👻

【Flutter】ModalBottomSheetの上にSnackBarを表示する方法

2022/08/19に公開

概要

登録フォームでModalBottomSheetを使っていたのですが、登録に成功した場合と登録に失敗した場合にSnackBarを表示する必要がありました。
成功時はModalBottomSheetが閉じるので良かったのですが、失敗した際には閉じないようにしているためSnackBarが後ろに隠れてしまい上手く表示ができませんでした。

今回は簡単に解決できたので備忘録として記事に残しました！
ModalBottomSheetとSnackBarを併用する際に使ってみてください！

変更前

画面中央にあるボタンを押すとModalBottomSheetが開き、
さらにその中のボタンを押すとSnackBarが表示されるサンプルです。
変更前だとSnackBarが隠れてしまいます。

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () {
        showModalBottomSheet(
          context: context,
          builder: (context) {
            return Center(
              child: ElevatedButton(
                onPressed: () {
                  ScaffoldMessenger.of(context).showSnackBar(
                    const SnackBar(content: Text('Hello!')),
                  );
                },
                child: const Text('SnackBarを表示する'),
              ),
            );
          },
        );
      },
      child: const Text('ModalBottomSheetを表示する'),
    );
  }
}

変更後

変更はとても簡単でshowModalBottomSheetのbuilderに設定している大元のWidgetをScaffoldでラップしただけです。
こうすることでModalBottomSheetの上にSnackBarを表示することができます。

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
     return ElevatedButton(
      onPressed: () {
        showModalBottomSheet(
          context: context,
          builder: (context) {
+           return Scaffold(
              body: Center(
                child: ElevatedButton(
                  onPressed: () {
                    ScaffoldMessenger.of(context).showSnackBar(
                      const SnackBar(content: Text('Hello!')),
                    );
                  },
                  child: const Text('SnackBarを表示する'),
                ),
              ),
+           );
          },
        );
      },
      child: const Text('ModalBottomSheetを表示する'),
    );
  }
}

サンプルコード

GitHubで編集を提案

概要

変更前

変更後

サンプルコード

Discussion