flutter-frontend-design

Flutter 前端设计技能

此技能将指导你打造独具特色、达到生产级水准的 Flutter 界面，避免千篇一律的“AI 垃圾风”。编写真正可用的 Flutter/Dart 代码，并特别注重美学细节与创意选择。

用户会提供 Flutter UI 需求：要构建的屏幕、组件，或完整应用。他们可能会补充用途、受众、目标平台或技术限制等背景信息。

设计思考（编码前）

编写任何 Dart 代码之前，先了解背景，并确定一个大胆的美学方向：

• 用途：这个界面要解决什么问题？谁会使用它？以移动端为先？平板？Web？
• 基调：选择鲜明的方向：极简主义、极繁主义混沌、复古未来主义、有机自然、奢华精致、趣味玩具风、编辑部／杂志风、粗野主义／原始风、装饰艺术／几何风、柔和／粉彩风、工业／实用主义、玻璃拟态、新拟态、黏土拟态等。
• 平台：Material 3、Cupertino，还是自定义设计系统？是否采用自适应 UI？
• 限制：状态管理（Riverpod、Bloc、Provider、GetX）、导航（GoRouter、auto_route）、目标平台。
• 差异化：怎样才能令人难忘？人们会记住哪一点？

至关重要：选定清晰的概念方向，并精准地贯彻执行。大胆的极繁主义和精致的极简主义都行得通——关键在于有意识地设计，而非追求强烈效果。

Flutter 架构模式

始终遵循以下 Flutter 专属模式：

Widget 结构

lib/
├── main.dart
├── app.dart                    # MaterialApp / CupertinoApp config
├── core/
│   ├── theme/
│   │   ├── app_theme.dart      # ThemeData definitions
│   │   ├── app_colors.dart     # Color constants & extensions
│   │   ├── app_typography.dart # TextStyle definitions
│   │   └── app_spacing.dart    # Spacing constants
│   ├── constants/
│   └── utils/
├── features/
│   └── feature_name/
│       ├── presentation/
│       │   ├── screens/
│       │   ├── widgets/
│       │   └── controllers/
│       ├── domain/
│       └── data/
└── shared/
    └── widgets/                # Reusable custom widgets

状态管理

• 简单的本地状态使用 StatefulWidget
• 复杂状态推荐使用 Riverpod 或 Bloc
• 始终将 UI 与业务逻辑分离
• 轻量级响应式模式使用 ValueNotifier / ChangeNotifier

响应式设计

// Always think responsive
LayoutBuilder(
  builder: (context, constraints) {
    if (constraints.maxWidth > 1200) return _desktopLayout();
    if (constraints.maxWidth > 600) return _tabletLayout();
    return _mobileLayout();
  },
)

Flutter 美学指南

字体排印

• 绝不未经定制就使用默认的 Material 字体（Roboto）
• 使用 Google Fonts 包（google_fonts）打造独特的字体风格
• 将醒目的展示字体与精致的正文字体搭配使用
• 优质搭配示例：
  • 展示字体：Playfair Display / 正文字体：Source Sans Pro
  • 展示字体：Space Grotesk / 正文字体：DM Sans
  • 展示字体：Cormorant Garamond / 正文字体：Fira Sans
  • 展示字体：Sora / 正文字体：Inter（适合设计时使用 Inter）
  • 展示字体：Clash Display / 正文字体：Satoshi
• 使用 TextTheme 扩展，在 AppTypography 类中定义所有文本样式

颜色与主题

• 使用 ColorScheme.fromSeed() 或自定义 ColorScheme 定义颜色
• 使用 ThemeExtension<T> 添加 Material 之外的自定义颜色属性
• 从一开始就同时支持浅色和深色主题
• CSS 变量的 Dart 等效方案 → Dart 常量 + Theme.of(context).extension<T>()
• 与其使用谨慎且均匀分布的配色，不如采用主导色搭配鲜明点缀色

// Example: Strong color system
class AppColors {
  // Primary palette
  static const primary = Color(0xFF1A1A2E);
  static const accent = Color(0xFFE94560);
  static const surface = Color(0xFF16213E);
  static const background = Color(0xFF0F3460);

  // Semantic colors
  static const success = Color(0xFF00C897);
  static const warning = Color(0xFFFFB800);
  static const error = Color(0xFFFF4757);

  // Gradients
  static const heroGradient = LinearGradient(
    colors: [Color(0xFF667eea), Color(0xFF764ba2)],
    begin: Alignment.topLeft,
    end: Alignment.bottomRight,
  );
}

动效与动画

Flutter 擅长动画，应善加利用：

• 隐式动画：AnimatedContainer、AnimatedOpacity、AnimatedScale、AnimatedSlide、AnimatedSwitcher
• Hero 动画：用于包含共享元素的屏幕切换
• 交错动画：使用 Interval 与 AnimationController 编排元素的依次显现
• 微交互：使用 GestureDetector + AnimatedScale 提供点击反馈
• 页面切换：使用自定义 PageRouteBuilder，搭配 SlideTransition、FadeTransition、ScaleTransition
• Lottie：用于复杂插画和加载状态（lottie 包）
• Rive：用于交互式矢量动画（rive 包）

// Staggered list animation example
class StaggeredListItem extends StatelessWidget {
  final int index;
  final Animation<double> animation;

  Widget build(BuildContext context) {
    return SlideTransition(
      position: Tween<Offset>(
        begin: const Offset(0, 0.3),
        end: Offset.zero,
      ).animate(CurvedAnimation(
        parent: animation,
        curve: Interval(
          index * 0.1,
          (index * 0.1) + 0.4,
          curve: Curves.easeOutCubic,
        ),
      )),
      child: FadeTransition(
        opacity: animation,
        child: child,
      ),
    );
  }
}

空间构图

• 使用 SliverAppBar 搭配 FlexibleSpaceBar，打造沉浸式滚动效果
• 使用 CustomScrollView 搭配混合的 Sliver Widget，实现复杂布局
• 使用 Stack + Positioned 创建重叠元素
• 使用 Transform 实现旋转、倾斜、透视效果
• 使用 ClipPath / CustomClipper 创建非矩形形状
• 使用 CustomPaint / CustomPainter 绘制独特背景和装饰元素

背景与视觉细节

• 使用 ShaderMask 实现渐变文本和蒙版效果
• 使用 BackdropFilter 和 ImageFilter.blur 实现玻璃拟态效果
• 使用 CustomPainter 绘制几何图案、噪声纹理和装饰元素
• 使用带有复杂 BoxDecoration（渐变、阴影、边框）的 DecoratedBox
• 使用带有多个 BoxShadow 的 Container 实现分层景深效果
• 使用 dart:ui 画布操作添加颗粒叠加效果和网格渐变

// Glassmorphism card
ClipRRect(
  borderRadius: BorderRadius.circular(20),
  child: BackdropFilter(
    filter: ImageFilter.blur(sigmaX: 15, sigmaY: 15),
    child: Container(
      decoration: BoxDecoration(
        color: Colors.white.withOpacity(0.1),
        borderRadius: BorderRadius.circular(20),
        border: Border.all(color: Colors.white.withOpacity(0.2)),
      ),
      child: content,
    ),
  ),
)

绝对不要做的事

• 绝对不要使用未经自定义的默认 Material 主题
• 绝对不要只用没有任何样式的 Scaffold + ListView + Card
• 绝对不要只依赖 Material 默认颜色（紫色/青绿色）
• 绝对不要忽略深色模式支持
• 绝对不要完全跳过动画——Flutter 的动画系统是其强项
• 绝对不要硬编码尺寸——使用 MediaQuery、LayoutBuilder、Flexible、Expanded
• 绝对不要使用看起来和其他 Flutter 教程如出一辙的通用占位模式
• 绝对不要忽略平台惯例（iOS 用户期待 Cupertino 模式）

软件包推荐

用途	软件包	用法
字体	google_fonts	排版
图标	flutter_svg、hugeicons、phosphor_flutter	自定义图标集
动画	flutter_animate、lottie、rive	复杂动画
图表	fl_chart、syncfusion_flutter_charts	数据可视化
效果	shimmer、flutter_blurhash	加载与图像效果
布局	flutter_staggered_grid_view	瀑布流/交错网格
导航	go_router、auto_route	声明式路由
状态	flutter_riverpod、flutter_bloc	状态管理
图像	cached_network_image、extended_image	图像加载与缓存

交付格式

构建 Flutter UI 时：

1. 单个组件/屏幕：提供包含导入语句的完整 .dart 文件
2. 多屏幕功能：提供文件夹结构和所有文件
3. 完整应用：提供 pubspec.yaml 和完整的 lib/ 结构
4. 使用外部软件包时，始终包含 pubspec.yaml 依赖项
5. 代码必须可编译、可运行——不提供伪代码或不完整片段
6. 添加注释，解释不明显的设计决策

质量检查清单

交付 Flutter UI 代码前，请确认：

• 使用具有独特色彩和排版的自定义 ThemeData
• 响应式布局（至少适配手机和平板）
• 至少包含 2-3 个有意义的动画或过渡效果
• 支持深色模式，或明确提供深色/浅色主题
• 适当拆分组件（避免超大的 build 方法）
• 考虑性能（使用 const 构造函数，并在需要时使用 RepaintBoundary）
• 确保无障碍性（使用 Semantics 组件，并保证足够的对比度）
• 在适当情况下使用适配平台的元素

请记住：Flutter 为你提供了一个像素级精准的画布和 120fps 动画。放手去做——充分践行独特构想，展现真正能够创造出的效果。