SuperAPI AI 工具集

flutter-theming-apps

设计与创作

查看项目

更新于 10-15 21:55

技能介绍

用途:为 Flutter 应用定制视觉外观,定义全局样式、颜色与排版,并实现跨平台自适应设计。

主要能力:讲解 Flutter 样式层级(具体 widget 样式 → 覆盖父主题 → 主应用主题);通过 MaterialApp 的 theme 属性配合 ThemeData 定义全局主题,用 Theme 包裹子树并调用 Theme.of(context).copyWith(...) 覆盖局部主题。涵盖 Material 3 指南:用 ColorScheme.fromSeed(seedColor: Colors.blue) 生成配色以保证对比度;用 surfaceTint 表达高度,如需恢复 M2 阴影可设 surfaceTint: Colors.transparent 并定义 shadowColor;用 NavigationBar、NavigationDrawer、SegmentedButton、FilledButton 替代旧组件。组件主题需使用 *ThemeData 类(如 CardThemeData、DialogThemeData、TabBarThemeData、AppBarThemeData、BottomAppBarThemeData、InputDecorationThemeData)。按钮用 TextButton、ElevatedButton、OutlinedButton 配合 ButtonStyle,简单覆盖可用 TextButton.styleFrom(...),状态相关样式用 MaterialStateProperty.resolveWith。自适应设计涉及 Scrollbar 的 thumbVisibility、SelectableText、Windows 与 macOS/Linux 的按钮顺序差异(TextDirection.rtl/ltr)、Tooltip 与右键菜单。

使用方式:提供两个工作流——将旧主题迁移到 Material 3(移除 useMaterial3: false、改用 ColorScheme.fromSeed、替换废弃的 accentColor 等属性、更新组件主题类、替换旧按钮与导航组件);实现自适应 UI 组件(按平台设置滚动条可见性、可选中文本、对话框按钮顺序、悬停提示)。

限制:资料未提供安装命令、收费信息或具体平台支持范围;示例代码仅作参考,实际使用需结合项目情况。