如何在Flutter 3.3.7中使用Material Design 3的Badge组件及查询可用组件

Badge组件使用说明 #

Flutter的Badge是Material3专属新增组件，要求Flutter SDK版本≥3.7.0（该版本正式集成M3 Badge）。

启用Material3后，直接调用Badge即可，示例代码：

Badge(
  label: const Text('3'),
  child: IconButton(
    icon: const Icon(Icons.notifications),
    onPressed: () {},
  ),
)

如果找不到组件，先排查三点：

• 确认ThemeData中已设置useMaterial3: true
• 执行flutter upgrade升级到最新稳定版
• 确保导入了package:flutter/material.dart

你还可以通过参数自定义Badge样式：

Badge(
  backgroundColor: Colors.red,
  shape: BadgeShape.circle,
  offset: const Offset(5, -5),
  label: const Text('99+'),
  child: const Icon(Icons.shopping_cart),
)

已支持的Material Design 3组件列表 #

目前Flutter稳定版中可用的M3组件/适配M3的组件包括：

• 新增专属组件：Badge、SegmentedButton、NavigationBar、NavigationDrawer、SearchBar
• 适配M3样式的原有组件：FilledButton、FilledTonalButton、OutlinedButton、ElevatedButton、Checkbox、Radio、Switch、TextField、Card、ListTile、Scaffold、Dialog、SnackBar

随着Flutter版本更新，会有更多M3组件逐步落地。

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