material3-expressive-flutter

Material 3 Expressive Flutter

此技能提供了在 Flutter 中实现 Material 3 Expressive 设计系统的全面模式、脚本和规则，重点关注基于物理的动效、有机形状和以提升参与度为导向的组件。

工作原理

1. 需求分析：当你询问 M3E 时，Agent 会分析上下文（组件类型、状态、重要性）。
2. 应用规则：应用 rules/ 中的规则（动效物理、形状变形），确保符合设计规范。
3. 生成代码：以 scripts/component_template.dart 为基础，生成高品质、易于访问且高性能的组件。
4. 验证：根据 M3E 原则审核输出，例如“空间弹簧与效果弹簧”和“形状对比”。

适用场景

• 开发新功能：创建需要高度用户参与度的组件（促销内容、引导流程、关键操作）时。
• 设计现代化：将标准 M3 应用更新为更流畅、更具表现力的风格。
• 表现力动效：实现基于弹簧的动画，营造自然的观感。
• 自定义形状：实现可变形容器或非标准圆角形状。

用法

1. 搭建新组件

使用模板创建健壮、能感知状态的 Widget。

# Path to script
flutter run scripts/component_template.dart

2. 实现策略

触发短语：

• “用 M3 Expressive 风格实现一个 [组件]”
• “为此过渡添加表现力动效”
• “将这个标准 M3 按钮现代化”
• “根据 M3 Expressive 原则审核我的 UI”

示例

空间弹簧动效（示例）

// Use for movement and position
Curves.elasticOut; // Strong, tactile response
Cubic(0.34, 1.56, 0.64, 1); // Expressive overshoot

形状变形容器

AnimatedContainer(
  duration: const Duration(milliseconds: 500),
  curve: Curves.elasticOut,
  decoration: ShapeDecoration(
    shape: M3ExpressiveShape.teardrop, // Custom token
    color: theme.colorScheme.primaryContainer,
  ),
);

参考指南

• 动效指南 - 空间弹簧与效果弹簧。
• 形状系统 - 方圆形、泪滴形和形状变形。
• 排版指南 - 编辑式层级。
• 组件库 - 所有 M3E 组件的模式。

规则与标准

1. 优先使用物理效果而非时长：使用弹簧（空间/效果），而非固定时长。
2. 充分圆润：为按钮和主要指示器使用 StadiumBorder()。
3. 提供有意义的反馈：表现力操作始终包含 HapticFeedback.lightImpact()。
4. 无障碍：确保最小触控目标为 48x48dp，并正确使用 Semantics。

故障排除

• “动画感觉抖动”：确保没有使用 Curves.linear，也没有在弹簧动画中设置过短的时长（<200ms）。
• “形状无法正确变形”：确保使用了 ShapeDecoration，并搭配支持插值的自定义 ShapeBorder。
• “UI 感觉平淡”：检查颜色对比度，并确保主要操作使用填充容器。

向用户展示结果

完成 M3E 任务时，总结新增的表现力特性：

• ✅ 动效：为 [操作] 应用了 [空间/效果] 弹簧。
• ✅ 形状：为 [组件] 使用了 [胶囊形/泪滴形/方圆形]。
• ✅ 触觉反馈：集成了触觉反馈。
• ✅ 颜色：使用了动态 M3 颜色令牌。
• ✅ 无障碍：已验证触控目标和语义。