SuperAPI AI 工具集

flutter-theming-apps

设计与创作

查看项目

更新于 10-16 08:47

技能介绍

用途:为 Flutter 应用定制视觉外观,定义全局样式、颜色和排版,并构建适配移动端与桌面/Web 的界面。

主要能力:主题按“具体 widget 样式 -> 就近父主题覆盖 -> 应用主主题”的层级生效。用 MaterialApp 的 theme 属性配合 ThemeData 定义全局主题,用 Theme 包裹子树并通过 Theme.of(context).copyWith(...) 覆盖局部主题。Material 3 是 Flutter 3.16 起的默认主题:用 ColorScheme.fromSeed(seedColor: Colors.blue) 生成配色以保障对比度;用 ColorScheme.surfaceTint 表示层级,若要恢复 M2 阴影行为可设 surfaceTint: Colors.transparent 并定义 shadowColor。旧组件应替换:BottomNavigationBar 换 NavigationBar,Drawer 换 NavigationDrawer,ToggleButtons 换 SegmentedButton;高强调按钮用 FilledButton。组件主题已规范化为 *ThemeData 类,如 cardTheme 用 CardThemeData、dialogTheme 用 DialogThemeData、tabBarTheme 用 TabBarThemeData、appBarTheme 用 AppBarThemeData 等。按钮用 TextButton/ElevatedButton/OutlinedButton 配合 ButtonStyle;简单覆盖可用 TextButton.styleFrom(...),状态相关样式用 MaterialStateProperty.resolveWith。

使用方式:迁移旧主题时,移除 useMaterial3: false,改用 ColorScheme.fromSeed(),替换弃用的 accentColor、accentTextTheme、AppBarTheme.color(改用 backgroundColor),更新组件主题类,替换旧按钮与导航组件。适配桌面/Web 时可控制滚动条 thumbVisibility、用 SelectableText 支持选中、按平台调整按钮顺序(Windows 用 TextDirection.rtl)、为交互元素添加 Tooltip。

限制:资料未提供收费、平台支持范围或效果保证等信息;具体实现需参考 Flutter 官方文档。