material3-expressive-flutter

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Material 3 Expressive Flutter

This skill provides comprehensive patterns, scripts, and rules for implementing the Material 3 Expressive design system in Flutter. It focuses on physics-based motion, organic shapes, and engagement-driven components.

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

How It Works

工作原理

Requirement Analysis: When you ask about M3E, the agent analyzes the context (component type, state, importance).
Rule Application: It applies rules from
```
rules/
```
(Motion Physics, Shape Morphing) to ensure design compliance.
Code Generation: It uses the
```
scripts/component_template.dart
```
as a base for premium, accessible, and high-performance components.
Verification: It audits the output against M3E principles like "Spatial vs Effects Springs" and "Shape Contrast".

需求分析：当你咨询M3E相关问题时，Agent会分析上下文（组件类型、状态、重要性）。
规则应用：它会应用
```
rules/
```
目录中的规则（物理动效、形状变形）以确保符合设计规范。
代码生成：它以
```
scripts/component_template.dart
```
为基础，生成高级、可访问且高性能的组件。
验证：它会对照M3E的原则（如“空间弹簧与效果弹簧”、“形状对比度”）对输出内容进行审核。

When to Use

适用场景

New Feature Development: When creating components requiring high user engagement (promos, onboarding, key actions).
Design Modernization: Updating standard M3 apps to the more fluid, expressive style.
Expressive Motion: Implementing spring-based animations for a natural feel.
Custom Shapes: Implementing morphing containers or non-standard rounded shapes.

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

Usage

使用方法

1. Scaffold a New Component

1. 搭建新组件

Use the template to create a robust, state-aware widget.

bash

undefined

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

bash

undefined

Path to script

flutter run scripts/component_template.dart

undefined

flutter run scripts/component_template.dart

undefined

2. Implementation Strategies

2. 实现策略

Trigger phrases:

"Implement a [component] with M3 Expressive style"
"Add expressive motion to this transition"
"Modernize this standard M3 button"
"Audit my UI against M3 Expressive principles"

触发语：

"以M3 Expressive风格实现一个[组件]"
"为这个过渡效果添加富有表现力的动效"
"将这个标准M3按钮现代化"
"对照M3 Expressive原则审核我的UI"

Examples

示例

Spatial Spring Motion (Example)

空间弹簧动效（示例）

dart

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

dart

// 用于移动和位置变化
Curves.elasticOut; // 强烈的触觉反馈
Cubic(0.34, 1.56, 0.64, 1); // 富有表现力的过冲效果

Shape Morphing Container

可变形容器

dart

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

dart

AnimatedContainer(
  duration: const Duration(milliseconds: 500),
  curve: Curves.elasticOut,
  decoration: ShapeDecoration(
    shape: M3ExpressiveShape.teardrop, // 自定义标识
    color: theme.colorScheme.primaryContainer,
  ),
);

Reference Guides

参考指南

Motion Guide - Spatial vs Effects Springs.
Shape System - Squircels, Teardrops, and Morphing.
Typography Guide - Editorial hierarchy.
Component Library - Patterns for all M3E components.

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

Rules & Standards

规则与标准

Physics Over Duration: Use springs (Spatial/Effects) instead of fixed durations.
Full Rounding: Use
```
StadiumBorder()
```
for buttons and primary indicators.
Meaningful Feedback: Always include
```
HapticFeedback.lightImpact()
```
for expressive actions.
Accessibility: Ensure minimum touch targets of 48x48dp and proper
```
Semantics
```
.

优先使用物理动效而非固定时长：使用弹簧动效（空间/效果）替代固定时长。
完全圆角：为按钮和主要指示器使用
```
StadiumBorder()
```
。
有意义的反馈：对于富有表现力的操作，始终添加
```
HapticFeedback.lightImpact()
```
触觉反馈。
可访问性：确保最小触摸目标为48x48dp，并正确使用
```
Semantics
```
。

Troubleshooting

故障排查

"Animation feels jittery": Ensure you aren't using
```
Curves.linear
```
or too short a duration (<200ms) with springs.
"Shape doesn't morph correctly": Ensure you are using
```
ShapeDecoration
```
with a custom
```
ShapeBorder
```
that supports interpolation.
"UI feels flat": Check color contrast and ensure you are using filled containers for primary actions.

“动画出现抖动”：确保没有在弹簧动效中使用
```
Curves.linear
```
或过短的时长（<200ms）。
“形状无法正确变形”：确保你使用的是支持插值的自定义
```
ShapeBorder
```
搭配
```
ShapeDecoration
```
。
“UI看起来平淡”：检查颜色对比度，并确保为主要操作使用填充式容器。

Present Results to User

向用户展示结果

When completing an M3E task, summarize the expressive features added:

✅ Motion: Applied [Spatial/Effects] springs for [Action].
✅ Shape: Used [Pill/Teardrop/Squircel] for [Component].
✅ Haptics: Integrated tactile feedback.
✅ Color: Dynamic M3 color tokens used.
✅ Accessibility: Verified touch targets and semantics.

完成M3E任务时，总结所添加的富有表现力的特性：

✅ 动效：为[操作]应用了[空间/效果]弹簧动效。
✅ 形状：为[组件]使用了[胶囊形/泪滴形/圆角矩形变体]。
✅ 触觉反馈：集成了触觉反馈。
✅ 颜色：使用了动态M3颜色标识。
✅ 可访问性：已验证触摸目标和语义设置。