Flutter 2.5 中的 Material Banner

Question

如何在 Flutter 2.5 中实现MaterialBanner？

像这样：

Answer 1

首先确保您使用的是 Flutter v2.5。

> flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 2.5.0, on Microsoft Windows [version 10.0.19043.1165], locale fr-FR)
[√] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
[√] Chrome - develop for the web
[√] Android Studio (version 4.1)
[√] Connected device (2 available)

然后，当您的小部件树中有 Scaffold 时，只需调用方法 ScaffoldMessenger.of(context).showMaterialBanner()。

以下代码取自article "What's new in Flutter 2.5"，与您展示的图片相对应：

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) => Scaffold(
        appBar: AppBar(
          title: const Text('The MaterialBanner is below'),
        ),
        body: Center(
          child: ElevatedButton(
            child: const Text('Show MaterialBanner'),
            onPressed: () => ScaffoldMessenger.of(context).showMaterialBanner(
              MaterialBanner(
                content: const Text('Hello, I am a Material Banner'),
                leading: const Icon(Icons.info),
                backgroundColor: Colors.yellow,
                actions: [
                  TextButton(
                    child: const Text('Dismiss'),
                    onPressed: () => ScaffoldMessenger.of(context)
                        .hideCurrentMaterialBanner(),
                  ),
                ],
              ),
            ),
          ),
        ),
      );
}

Answer 2

显示MaterialBanner:

只要调用这个方法：

void showMaterialBanner() {
  final materialBanner = MaterialBanner(
    content: Text('Good Morning'),
    actions: [
      TextButton(
        onPressed: () => ScaffoldMessenger.of(context).hideCurrentMaterialBanner(),
        child: Text('Dismiss'),
      ),
    ],
  );
  ScaffoldMessenger.of(context).showMaterialBanner(materialBanner);
}

---

隐藏MaterialBanner：

您可以通过 3 种方式隐藏它：

1. 带动画：

   ScaffoldMessenger.of(context).hideCurrentMaterialBanner();
   

2. 带动画：

   final controller = ScaffoldMessenger.of(context).showMaterialBanner(materialBanner);
   controller.close();
   

3. 没有动画：

   ScaffoldMessenger.of(context).removeCurrentMaterialBanner();
   

---

隐藏所有现有的并显示一个新的：

ScaffoldMessenger.of(context)
  ..hideCurrentMaterialBanner() // or removeCurrentMaterialBanner
  ..showMaterialBanner(materialBanner);