flutter-ui-ux

Flutter UI/UX 开发

使用现代设计模式和最佳实践，创建美观、响应式且带有动画效果的 Flutter 应用。

核心理念

“移动优先、动画增强、无障碍设计”——重点关注：

优先级	领域	目的
1	Widget 组合	可复用、易维护的 UI 组件
2	响应式设计	适配各种屏幕尺寸的布局
3	动画	流畅且恰当的过渡效果和微交互
4	自定义主题	一致且具有品牌特色的视觉形象
5	性能	以 60fps 渲染并优化资源使用

开发工作流

按顺序执行各阶段。完成当前阶段后再继续。

阶段 1：分析需求

1. 了解应用结构——识别现有的 Widget、屏幕和导航
2. 检查设计系统——检查现有主题、颜色和排版
3. 平台考量——注意 iOS/Android 特定要求
4. 性能限制——识别动画复杂度和渲染需求

输出：UI 需求分析及组件拆分。

阶段 2：设计 Widget 架构

1. 规划 Widget 层级——设计组合树
2. 状态管理策略——选择 StatefulWidget 或 StatelessWidget
3. 识别自定义 Widget——规划可复用组件
4. 集成主题——定义配色方案和排版

输出：Widget 架构图和组件规范。

阶段 3：实现核心 UI

1. 创建基础 Widget——构建基础组件
2. 实现响应式布局——使用 MediaQuery、LayoutBuilder、Flex/Expanded
3. 添加自定义主题——ThemeData、ColorScheme、TextThemes
4. 集成导航——实现路由和过渡效果

Widget 组合模式：

// ✅ DO: Compose small, reusable widgets
class CustomCard extends StatelessWidget {
  final Widget child;
  final EdgeInsets padding;

  const CustomCard({required this.child, this.padding = EdgeInsets.all(16)});

  @override
  Widget build(BuildContext context) {
    return Card(
      elevation: 4,
      child: Padding(padding: padding, child: child),
    );
  }
}

// ✅ DO: Use const constructors where possible
const Icon(Icons.add) // Better than Icon(Icons.add)

阶段 4：添加动画

1. 隐式动画——AnimatedContainer、AnimatedOpacity
2. 显式动画——使用 Tween 的 AnimationController
3. Hero 动画——使用 Hero Widget 实现屏幕过渡
4. 微交互——按钮按下、悬停效果、加载状态

动画性能规则：

// ✅ DO: Use performance-optimized animations
AnimatedBuilder(
  animation: controller,
  builder: (context, child) => Transform.rotate(
    angle: controller.value * 2 * math.pi,
    child: child, // Pass child to avoid rebuilding
  ),
  child: const Icon(Icons.refresh),
)

// ❌ DON'T: Animate expensive operations
// Avoid animating complex layouts or heavy widgets

阶段 5：优化和测试

1. 性能分析——使用 Flutter DevTools
2. 无障碍测试——屏幕阅读器、对比度
3. 响应式测试——多种屏幕尺寸和方向
4. 动画流畅度——验证 60fps

快速参考

响应式设计模式

技术	使用场景	实现方式
LayoutBuilder	响应式布局	LayoutBuilder(builder: (context, constraints) => ...)
MediaQuery	屏幕信息	MediaQuery.of(context).size.width
Flexible/Expanded	弹性布局	Flexible(child: ...) 或 Expanded(child: ...)
AspectRatio	固定比例	AspectRatio(aspectRatio: 16/9, child: ...)

动画类型

类型	Widget	时长	使用场景
淡入淡出	AnimatedOpacity	200-300ms	显示/隐藏内容
滑动	SlideTransition	250-350ms	屏幕过渡
缩放	AnimatedScale	150-250ms	按钮按下
旋转	RotationTransition	1000-2000ms	加载指示器

自定义 Widget 示例

主题按钮：

class ThemedButton extends StatelessWidget {
  final String text;
  final VoidCallback onPressed;

  const ThemedButton({required this.text, required this.onPressed});

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: onPressed,
      style: ElevatedButton.styleFrom(
        backgroundColor: Theme.of(context).colorScheme.primary,
        foregroundColor: Theme.of(context).colorScheme.onPrimary,
        padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 12),
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
      ),
      child: Text(text),
    );
  }
}

响应式卡片：

class ResponsiveCard extends StatelessWidget {
  final Widget child;

  const ResponsiveCard({required this.child});

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        if (constraints.maxWidth > 600) {
          return _buildWideLayout(child);
        } else {
          return _buildNarrowLayout(child);
        }
      },
    );
  }

  Widget _buildWideLayout(Widget child) {
    return Card(
      margin: const EdgeInsets.all(16),
      child: Padding(padding: const EdgeInsets.all(24), child: child),
    );
  }

  Widget _buildNarrowLayout(Widget child) {
    return Card(
      margin: const EdgeInsets.all(8),
      child: Padding(padding: const EdgeInsets.all(16), child: child),
    );
  }
}

资源

• Widget 模式：参见 references/widget-patterns.md
• 动画示例：参见 references/animation-patterns.md
• 主题模板：参见 references/theme-templates.md
• 性能指南：参见 references/performance-optimization.md

技术栈

• 核心 Widget：StatelessWidget、StatefulWidget、InheritedWidget
• 布局：Row、Column、Stack、GridView、ListView
• 动画：AnimationController、Tween、AnimatedWidget
• 主题：ThemeData、ColorScheme、TextTheme
• 导航：Navigator、MaterialPageRoute、Hero

无障碍（必需）

始终实现：

// Semantic labels for screen readers
Semantics(
  label: 'Add item to cart',
  button: true,
  child: IconButton(icon: Icon(Icons.add_cart), onPressed: () {}),
)

// High contrast support
Theme.of(context).colorScheme.contrast() == Brightness.dark

// Font scaling
MediaQuery.of(context).accessibleNavigation

性能指南

• 尽可能使用 const 小部件
• 对于较长的列表，优先使用 ListView.builder
• 使用 const 键避免不必要的重建
• 对于复杂的动画，使用 RepaintBoundary
• 定期使用 Flutter DevTools 进行性能分析

---

这项 Flutter UI/UX 技能将移动应用开发转变为系统化流程，确保打造出美观、响应迅速、性能出色且用户体验卓越的应用程序。