【Flutter】ダイアログの下にSnackBarが表示される

はじめに

showDialogを使って表示したダイアログからSnackBarを呼び出すと、下記のようにダイアログの下にSnackBarが表示されてしまったので、
解決方法を調べました。

解決前のコード

解決前のコードは、普通にshowDialogメソッドのbuilderでダイアログを作成して表示しています。
SnackBarはAlertDialogの「はい」ボタン押下時に出るように実装しています。

  void _showAlertDialog(BuildContext context) {
    showDialog(
      context: context,
      builder: (context) => createAlertDialog(context),
    );
  }

  AlertDialog createAlertDialog(BuildContext context) {
    return AlertDialog(
      contentPadding: EdgeInsets.zero,
      title: Container(color: Colors.lightBlue, child: const Text("Title")),
      titlePadding: EdgeInsets.zero,
      content: Container(
        color: Colors.lightBlue,
        child: const Text("エラーが発生しました。\n再度実行しますか"),
      ),
      actions: [
        TextButton(
          child: const Text("はい"),
          onPressed: () {
            ScaffoldMessenger.of(context)
                .showSnackBar(const SnackBar(content: Text("pressed!!")));
          },
        ),
        TextButton(
          child: const Text("いいえ"),
          onPressed: () {
            Navigator.of(context).pop();
          },
        ),
      ],
    );
  }

解決後のコード

解決後のコードは、showDialogで表示するところまでは一緒ですが、
builderの部分でScaffoldを使用しています。
明示的にScaffoldを使うことで、このダイアログと同じ階層にSnackBarを表示できます。
注意として、backgroundColorにColors.transparentを指定することを忘れないでください。
透明にしておかないとデフォルトの背景色が表示されてしまうからです。

  void _showAlertDialog(BuildContext context) {
    showDialog(
      context: context,
+       builder: (context) => Scaffold(
+       backgroundColor: Colors.transparent,
        body: createAlertDialog(context),
      ),
    );
  }