SuperAPI AI 工具集

flutter-theme-factory

前端与建站

查看项目

更新于 10-16 05:57

技能介绍

用途

Flutter Theme Factory 是一个为 Flutter 应用提供专业主题配置的技能。它提供一组经过挑选的 Flutter ThemeData 配置,每个配置都包含精心搭配的调色板、Google Fonts 字体配对以及组件级主题。选定主题后会生成可直接用于生产的 Dart 代码,帮助为任意 Flutter 应用套用一致、专业的视觉风格。

主要能力

每个主题包含:具有浅色与深色变体的协调 ColorScheme;面向 display、headline、title、body、label 文本的互补 Google Fonts 字体配对;组件级主题(AppBarTheme、CardTheme、ElevatedButtonTheme、InputDecorationTheme 等);以及适配不同场景与受众的独特视觉识别。

内置主题

技能提供 12 个预置主题,分别为:1. Ocean Depths,专业沉稳的海洋风格,适合金融、咨询、企业;2. Sunset Boulevard,温暖而充满活力,适合社交、生活方式、外卖;3. Forest Canopy,自然踏实的泥土色调,适合健康、可持续、户外;4. Modern Minimalist,干净现代的灰阶,适合生产力工具、SaaS、开发者工具;5. Golden Hour,浓郁温暖的秋色,适合摄影、奢华、高端;6. Arctic Frost,清冷的冬日风格,适合医疗、金融科技、分析;7. Desert Rose,柔和精致的灰粉色调,适合时尚、美妆、生活方式;8. Tech Innovation,大胆现代的科技美学,适合初创、AI/ML、开发者;9. Botanical Garden,清新有机的花园色,适合健康、有机食品、植物;10. Midnight Galaxy,戏剧化的宇宙深色调,适合游戏、娱乐、音乐;11. Neon Tokyo,赛博朋克高对比霓虹,适合游戏、夜生活、科技;12. Terracotta Studio,温暖陶土与手工艺质感,适合艺术、手工、室内设计。

使用方式

首先展示可用主题列表及说明,然后询问用户想应用哪个主题,等待用户明确确认所选主题。确认后读取 themes/ 目录中对应的主题文件,生成完整的 Dart 代码,并交付可直接放入项目的 app_theme.dart、app_colors.dart、app_typography.dart 文件。

生成的代码结构为 lib/core/theme/ 目录,包含:app_theme.dart(浅色与深色模式的 ThemeData)、app_colors.dart(颜色常量与 ColorScheme)、app_typography.dart(Google Fonts TextTheme)、app_spacing.dart(一致的间距尺度)。app_theme.dart 使用 Material 3(useMaterial3: true),提供 light 与 dark 两个 ThemeData,覆盖 colorScheme、textTheme 以及 AppBarTheme、CardTheme、ElevatedButtonTheme、InputDecorationTheme、BottomNavigationBarTheme、FloatingActionButtonTheme、ChipTheme、DividerTheme 等组件主题。app_colors.dart 包含品牌色、语义色(success、warning、error、info)、渐变以及完整的浅色与深色 ColorScheme。app_typography.dart 通过 Google Fonts 定义 display、headline、title、body、label 各层级字号与字重。

应用流程

选定主题后:从 themes/ 目录读取对应主题文件;生成完整的 app_theme.dart、app_colors.dart、app_typography.dart、app_spacing.dart;附上 pubspec.yaml 依赖新增项(如 google_fonts);提供 main.dart 使用示例,例如在 MaterialApp 中设置 theme: AppTheme.light、darkTheme: AppTheme.dark、themeMode: ThemeMode.system;确保浅色与深色模式均满足 WCAG AA 对比度;检查所有 Material 组件主题配置正确。

自定义主题

当现有主题都不适用时,可创建自定义主题:询问用户的品牌色(如有)、氛围/风格、目标受众、应用类别;按与预置主题相同的结构生成自定义主题;赋予描述性名称;展示一个预览组件,呈现主题在关键组件上的效果;用户认可后再应用。

预览组件

展示主题预览时会生成 ThemePreview 组件,显示:调色板色块、排版示例(所有文本样式)、按钮变体(elevated、filled、outlined、text)、带内容的卡片、TextField/Input、BottomNavigationBar 示例、Chip 变体、以及浅色与深色并排对比。

适用场景

适合需要为 Flutter 应用快速套用专业、一致主题的开发者,尤其是希望在金融、社交、健康、SaaS、游戏、时尚等特定行业风格中选型,或需要同时支持浅色/深色模式并保证对比度合规的项目。

限制

关于该技能的收费、价格、平台支持范围与具体使用步骤,资料未提供更多信息;技能实际运行依赖所选的预置主题文件与 Dart/Flutter 环境,具体安装与集成细节需以资料中给出的代码结构与示例为准。