【Flutter】MaterialBannerを表示する

背景

Flutter 2.5.xから導入されたMaterialBannerを試してみました。
ユーザに何かを確実に確認させたい場合、便利かもしれません。

実装イメージ

環境

$ flutter --version
Flutter 2.5.1 • channel stable • https://github.com/flutter/flutter.git
Framework • revision ffb2ecea52 (5 days ago) • 2021-09-17 15:26:33 -0400
Engine • revision b3af521a05
Tools • Dart 2.14.2

pubspec.yaml

environment:
  sdk: ">=2.14.2 <3.0.0"

実装

以下の公式ブログ[1]とこちらの記事[2]を参考にして実装しました。
微妙につまづいた所はコメントに記載しているので、その辺りも見ていただければと。
[1] https://medium.com/flutter/whats-new-in-flutter-2-5-6f080c3f3dc
[2] https://rizumita.medium.com/flutter%E3%81%A7snackbar%E3%82%92%E8%A1%A8%E7%A4%BA%E3%81%99%E3%82%8B-153ae42b6dea

ポイントとなる部分を以下にピックアップしました。表示したいタイミングで、以下をコールすると画面上部に表示されます。
※もし、ソースコードを簡単に動かしたい場合は、GitHubに置いたので参考にしていただければと。

ScaffoldMessenger.of(context).showMaterialBanner(
  /// ✨✨sdkが2.14以上でないと呼び出せないので注意
  MaterialBanner(
    content: const Text('Hello, I am a Material Banner'),
    leading: const Icon(Icons.info),
    backgroundColor: Colors.orange,
    actions: [
      TextButton(
        child: const Text('Dismiss'),
        onPressed: () => ScaffoldMessenger.of(context)
          .hideCurrentMaterialBanner(),
      ),
    ],
  ),
),

そこまで長くないので呼び出し方含めてサンプルコード全文も。
※既にScaffoldを定義している場合に、MaterialBannerを表示する際、少しハマったのでその辺りだけ見ればいいかも。

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Material Banner sample'),
        ),

        /// ✨✨SnackBarと同様にMaterialBannerも、既にbuildの中でScaffoldを利用している場合、Builderが必要。
        /// (微妙にハマりポイントかもしれない)
        body: Builder(
          builder: (BuildContext context) {
            return Center(
              child: ElevatedButton(
                child: const Text('Show MaterialBanner'),
                onPressed: () =>
                    ScaffoldMessenger.of(context).showMaterialBanner(
                  /// ✨✨sdkが2.14以上でないと呼び出せないので注意
                  MaterialBanner(
                    content: const Text('Hello, I am a Material Banner'),
                    leading: const Icon(Icons.info),
                    backgroundColor: Colors.orange,
                    actions: [
                      TextButton(
                        child: const Text('Dismiss'),
                        onPressed: () => ScaffoldMessenger.of(context)
                            .hideCurrentMaterialBanner(),
                      ),
                    ],
                  ),
                ),
              ),
            );
          },
        ),
      ),
    );
  }
}