flutter-ui-ux

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Flutter UI/UX Development

Flutter UI/UX 开发

Create beautiful, responsive, and animated Flutter applications with modern design patterns and best practices.

借助现代设计模式与最佳实践，打造美观、响应式且带有动画效果的Flutter应用。

Core Philosophy

核心理念

"Mobile-first, animation-enhanced, accessible design" - Focus on:

Priority	Area	Purpose
1	Widget Composition	Reusable, maintainable UI components
2	Responsive Design	Adaptive layouts for all screen sizes
3	Animations	Smooth, purposeful transitions and micro-interactions
4	Custom Themes	Consistent, branded visual identity
5	Performance	60fps rendering and optimal resource usage

「移动优先、动画增强、可访问性设计」 - 聚焦以下领域：

优先级	领域	目标
1	组件组合	可复用、易维护的UI组件
2	响应式设计	适配所有屏幕尺寸的布局
3	动画效果	流畅、有意义的过渡与微交互
4	自定义主题	一致的品牌视觉识别体系
5	性能优化	60fps渲染与最优资源占用

Development Workflow

开发流程

Execute phases sequentially. Complete each before proceeding.

按顺序执行各阶段，完成当前阶段后再推进下一阶段。

Phase 1: Analyze Requirements

阶段1：需求分析

Understand app structure - Identify existing widgets, screens, and navigation
Design system review - Check existing themes, colors, and typography
Platform considerations - Note iOS/Android specific requirements
Performance constraints - Identify animation complexity and rendering needs

Output: UI requirements analysis with component breakdown.

理解应用结构 - 识别现有组件、页面与导航逻辑
审查设计系统 - 检查现有主题、配色与排版规则
考虑平台差异 - 记录iOS/Android的特定需求
明确性能约束 - 识别动画复杂度与渲染需求

输出：包含组件拆分的UI需求分析文档。

Phase 2: Design Widget Architecture

阶段2：设计组件架构

Widget hierarchy planning - Design composition tree
State management strategy - Choose StatefulWidget vs StatelessWidget
Custom widget identification - Plan reusable components
Theme integration - Define color schemes and typography

Output: Widget architecture diagram and component specifications.

规划组件层级 - 设计组件组合树
确定状态管理策略 - 选择StatefulWidget或StatelessWidget
识别自定义组件 - 规划可复用组件
集成主题系统 - 定义配色方案与排版规则

输出：组件架构图与组件规格说明。

Phase 3: Implement Core UI

阶段3：实现核心UI

Create base widgets - Build foundational components
Implement responsive layouts - Use MediaQuery, LayoutBuilder, Flex/Expanded
Add custom themes - ThemeData, ColorScheme, TextThemes
Integrate navigation - Implement routing and transitions

Widget Composition Patterns:

dart

// ✅ 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)

创建基础组件 - 构建核心基础组件
实现响应式布局 - 使用MediaQuery、LayoutBuilder、Flex/Expanded
添加自定义主题 - ThemeData、ColorScheme、TextThemes
集成导航功能 - 实现路由与过渡效果

组件组合模式：

dart

// ✅ 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)

Phase 4: Add Animations

阶段4：添加动画效果

Implicit animations - AnimatedContainer, AnimatedOpacity
Explicit animations - AnimationController with Tween
Hero animations - Screen transitions with Hero widgets
Micro-interactions - Button presses, hover effects, loading states

Animation Performance Rules:

dart

// ✅ 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

隐式动画 - AnimatedContainer、AnimatedOpacity
显式动画 - 结合AnimationController与Tween使用
Hero动画 - 使用Hero组件实现页面过渡
微交互 - 按钮点击、悬停效果、加载状态动画

动画性能规则：

dart

// ✅ 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

Phase 5: Optimize and Test

阶段5：优化与测试

Performance profiling - Use Flutter DevTools
Accessibility testing - Screen readers, contrast ratios
Responsive testing - Multiple screen sizes and orientations
Animation smoothness - 60fps validation

性能分析 - 使用Flutter DevTools
可访问性测试 - 屏幕阅读器、对比度检测
响应式测试 - 多屏幕尺寸与横竖屏测试
动画流畅度 - 验证60fps渲染

Quick Reference

快速参考

Responsive Design Patterns

响应式设计模式

Technique	Use Case	Implementation
LayoutBuilder	Responsive layouts	`LayoutBuilder(builder: (context, constraints) => ...)`
MediaQuery	Screen info	`MediaQuery.of(context).size.width`
Flexible/Expanded	Flex layouts	`Flexible(child: ...)` or `Expanded(child: ...)`
AspectRatio	Fixed ratios	`AspectRatio(aspectRatio: 16/9, child: ...)`

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

Animation Types

动画类型

Type	Widget	Duration	Use Case
Fade	AnimatedOpacity	200-300ms	Show/hide content
Slide	SlideTransition	250-350ms	Screen transitions
Scale	AnimatedScale	150-250ms	Button presses
Rotation	RotationTransition	1000-2000ms	Loading indicators

类型	组件	时长	使用场景
淡入淡出	AnimatedOpacity	200-300ms	显示/隐藏内容
滑动	SlideTransition	250-350ms	页面过渡
缩放	AnimatedScale	150-250ms	按钮点击效果
旋转	RotationTransition	1000-2000ms	加载指示器

Custom Widget Examples

自定义组件示例

Themed Button:

dart

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),
    );
  }
}

Responsive Card:

dart

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),
    );
  }
}

主题化按钮：

dart

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),
    );
  }
}

响应式卡片：

dart

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),
    );
  }
}

Resources

资源

Widget patterns: See
```
references/widget-patterns.md
```
Animation examples: See
```
references/animation-patterns.md
```
Theme templates: See
```
references/theme-templates.md
```
Performance guide: See
```
references/performance-optimization.md
```

组件模式: 参考
```
references/widget-patterns.md
```
动画示例: 参考
```
references/animation-patterns.md
```
主题模板: 参考
```
references/theme-templates.md
```
性能优化指南: 参考
```
references/performance-optimization.md
```

Technical Stack

技术栈

Core Widgets: StatelessWidget, StatefulWidget, InheritedWidget
Layout: Row, Column, Stack, GridView, ListView
Animation: AnimationController, Tween, AnimatedWidget
Themes: ThemeData, ColorScheme, TextTheme
Navigation: Navigator, MaterialPageRoute, Hero

核心组件: StatelessWidget、StatefulWidget、InheritedWidget
布局组件: Row、Column、Stack、GridView、ListView
动画组件: AnimationController、Tween、AnimatedWidget
主题系统: ThemeData、ColorScheme、TextTheme
导航组件: Navigator、MaterialPageRoute、Hero

Accessibility (Required)

可访问性（必填）

Always implement:

dart

// 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

务必实现以下内容：

dart

// 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

Performance Guidelines

性能优化指南

Use
```
const
```
widgets where possible
Prefer
```
ListView.builder
```
for long lists
Avoid unnecessary rebuilds with
```
const
```
keys
Use
```
RepaintBoundary
```
for complex animations
Profile with Flutter DevTools regularly

This Flutter UI/UX skill transforms mobile app development into a systematic process that ensures beautiful, responsive, and performant applications with exceptional user experiences.

尽可能使用
```
const
```
组件
长列表优先使用
```
ListView.builder
```
使用
```
const
```
键避免不必要的重绘
复杂动画使用
```
RepaintBoundary
```
定期使用Flutter DevTools进行性能分析

这套Flutter UI/UX开发技能将移动应用开发转化为系统化流程，确保打造出美观、响应式且性能优异的应用，为用户提供卓越的使用体验。