使用 ScaffoldMessenger 显示自定义小部件

Question

我希望在我的应用程序中有一个小部件，其运行方式与 MaterialBanner 和 ScaffoldMessenger 的运行方式大致相同。但是我想自定义横幅的外观。

有没有办法自定义 MaterialBanner 的外观？在我最初的实验中，我考虑过扩展它，但最后我发现这并没有真正奏效。还有一瞬间，我认为在我对 showMaterialBanner 的调用中输入自定义小部件可能会起作用，但很快就排除了这种可能性。

有几件事我正在努力弄清楚如何通过 MaterialBanner 小部件解决问题，如果仍然可行的话：

我不喜欢（因为缺少更好的术语）应用的横幅区域的灰色覆盖。我不确定在哪里进行调整。我已经尝试将背景颜色设置为白色和透明，但它最终仍显示为灰白色。
行动。我打算在横幅内容中进行操作。目前我正在通过另一个 SO 问题SizedBox.shrink()

Answer 1

编辑：example 显示了我认为您正在寻找的内容。

A MaterialBanner 已经可以自定义了。将您想要的小部件放在 content 参数或操作列表中。

ScaffoldMessenger.of(context).showMaterialBanner(
  MaterialBanner(
    content: const Text('This is a MaterialBanner'), // <- This can be whatever you want
    actions: <Widget>[
      TextButton(
        onPressed: () => ScaffoldMessenger.of(context).hideCurrentMaterialBanner(),
        child: const Text('DISMISS'), 
      ), // <- So can these
    ],
  ),
);

Answer 2

您可以在您的应用主题中更改 MaterialBanner（外部小部件）的样式：

MaterialApp(
  .
  .
  theme: ThemeData(
    .
    .
    .
    bannerTheme: MaterialBannerThemeData(
      backgroundColor: ,
      contentTextStyle: ,
      elevation: ,
      leadingPadding: ,
    ),
  ),
);

如果你想改变内部小部件的结构，你可以将任何小部件传递给 content :

MaterialBanner(
  content: Row(
    children: const[
      Icon(Icons.check),
      Expanded(
        child: Text('This is a MaterialBanner'),
      ),
    ],
  ),
  actions: [
    TextButton(
      onPressed: () => ScaffoldMessenger.of(context).hideCurrentMaterialBanner(),
      child: const Text('DISMISS'),
    ),
  ],
);

使用 ScaffoldMessenger 显示自定义小部件

Show custom widget with ScaffoldMessenger

dart

flutter