flutter 2.5 中的材质横幅

Question

我如何MaterialBanner实施Flutter 2.5中实现 a ？

像这样 ：

Answer 1

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

\n

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

\n

ScaffoldMessenger.of(context).showMaterialBanner()然后，当你有一个时，只需调用该方法Scaffold。

\n

以下代码摘自文章《What's new in Flutter 2.5》，对应于您显示的图像：

\n

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

\n

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);