Flutter 2.5中如何实现MaterialBanner组件？

Flutter 2.5版本已经官方内置了MaterialBanner组件，无需引入第三方依赖，自带顶部滑入滑出的动画效果，和你需要的演示效果匹配，实现步骤如下：

核心API说明 #

你只需要通过ScaffoldMessenger的showMaterialBanner方法触发展示即可，组件核心可配置参数：

• content：设置横幅内的主文本内容
• leading：可选参数，配置左侧前置图标，适配提示、警告、成功等不同场景
• actions：必填参数，至少配置1个操作按钮，常用的是确认、关闭按钮
• backgroundColor：自定义横幅背景色
• elevation：调整横幅阴影高度
• padding/margin：调整组件内边距和外边距

完整可运行示例代码 #

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'MaterialBanner Demo',
      home: Scaffold(
        appBar: AppBar(title: const Text('MaterialBanner示例')),
        body: const BannerTestPage(),
      ),
    );
  }
}

class BannerTestPage extends StatelessWidget {
  const BannerTestPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: ElevatedButton(
        onPressed: () {
          // 触发显示MaterialBanner
          ScaffoldMessenger.of(context).showMaterialBanner(
            MaterialBanner(
              content: const Text('您有一条未读的系统通知待查看'),
              leading: const Icon(Icons.notifications_active, color: Colors.blue),
              backgroundColor: Colors.grey[100],
              actions: [
                TextButton(
                  onPressed: () {
                    // 点击后隐藏当前横幅
                    ScaffoldMessenger.of(context).hideCurrentMaterialBanner();
                    // 可在这里添加你自己的业务逻辑
                  },
                  child: const Text('稍后查看'),
                ),
                TextButton(
                  onPressed: () {
                    ScaffoldMessenger.of(context).hideCurrentMaterialBanner();
                    // 可在这里添加跳转查看详情的逻辑
                  },
                  child: const Text('立即查看'),
                ),
              ],
            ),
          );
        },
        child: const Text('显示MaterialBanner'),
      ),
    );
  }
}

注意事项 #

• 不要直接在build方法中调用showMaterialBanner，如果需要页面进入就展示，可在initState生命周期中通过SchedulerBinding.instance.addPostFrameCallback回调触发
• Flutter 2.5版本中原来的Scaffold.of(context)展示悬浮组件的方法已废弃，统一使用ScaffoldMessenger管理，避免页面跳转后组件找不到对应Scaffold的异常
• 如果你需要同时展示多个横幅，ScaffoldMessenger会按触发顺序依次展示，上一个关闭后才会展示下一个

内容的提问来源于stack exchange，提问作者Huseyn