SuperAPI AI 工具集

m3-web-flutter

通用与其它

查看项目

更新于 10-16 08:39

技能介绍

用途:帮助开发者在 Flutter 中落地 Material Design 3(M3)。Flutter 自 3.16 起内置 M3 支持,material 库已提供 M3 组件、动态取色与主题能力,基线功能无需额外包。

主要能力:涵盖主题设置、配色方案(colorSchemeSeed 或 ColorScheme.fromSeed)、亮暗主题、Android 12+ 的 Material You 动态取色,以及按钮、卡片、文本框、导航等 M3 组件的用法。M3 Expressive 正以模块化包(m3e_design)形式开发,可添加 m3e_design: ^latest,用于增强形状、动效、排版与新组件。

使用方式:在 ThemeData 中设置 useMaterial3: true,并用 colorSchemeSeed 或 ColorScheme.fromSeed 生成颜色;同时定义亮色与暗色主题。动态取色需引入 import 'package:dynamic_color/dynamic_color.dart'; 并用 DynamicColorBuilder 获取 lightDynamic / darkDynamic,无动态色时回退到种子色。组件使用 M3 变体,如 FilledButton、OutlinedButton、TextButton、FilledButton.tonal、ElevatedButton,避免 RaisedButton;排版通过 Theme.of(context).textTheme 使用 M3 字阶;导航用 NavigationBar 与 NavigationDestination。

适用场景:使用 Flutter 的跨平台移动、Web 与桌面应用,希望采用 Google 官方 M3 支持,或在 Android 12+ 上使用动态取色(Material You)的项目。

限制:基线 M3 已内置,但完整 M3 Expressive 仍在开发中;动态取色依赖 Android 12+ 及 dynamic_color 包,其他平台需提供回退配色。具体版本要求、性能与兼容性细节资料暂未提供。