154 lines
4.9 KiB
Markdown
154 lines
4.9 KiB
Markdown
# External Documentation - Material 3 Expressive
|
|
|
|
## Official Material Design Documentation
|
|
|
|
### Main Resources
|
|
- **M3 Expressive Overview**: https://m3.material.io/blog/building-with-m3-expressive
|
|
- **Material Design Home**: https://m3.material.io/
|
|
- **Motion Guidelines**: https://m3.material.io/styles/motion/overview
|
|
- **Shape Principles**: https://m3.material.io/styles/shape/overview-principles
|
|
|
|
### Component Documentation
|
|
|
|
#### New M3 Expressive Components
|
|
- **Split Button**: https://m3.material.io/components/split-button/overview
|
|
- **Button Groups**: https://m3.material.io/components/button-groups/overview
|
|
- **Progress Indicators**: https://m3.material.io/components/progress-indicators/overview
|
|
- **Toolbars**: https://m3.material.io/components/toolbars/overview
|
|
|
|
#### Updated Components
|
|
- **App Bars**: https://m3.material.io/components/app-bars/overview
|
|
- **Buttons**: https://m3.material.io/components/buttons/overview
|
|
- **Icon Buttons**: https://m3.material.io/components/icon-buttons/overview
|
|
- **Navigation Rail**: https://m3.material.io/components/navigation-rail/overview
|
|
- **Navigation Bar**: https://m3.material.io/components/navigation-bar/overview
|
|
|
|
## Flutter Resources
|
|
|
|
### Official Flutter
|
|
- **Material Design for Flutter**: https://docs.flutter.dev/ui/design/material
|
|
- **Material 3 Guide**: https://docs.flutter.dev/ui/design/material
|
|
- **Flutter Animations**: https://docs.flutter.dev/ui/animations
|
|
|
|
### Flutter GitHub
|
|
- **M3 Expressive Umbrella Issue**: https://github.com/flutter/flutter/issues/168813
|
|
- Tracks all M3 Expressive work for Flutter
|
|
- Current status: Paused while Material/Cupertino decoupling happens
|
|
- Community contributions welcome once roadmap is clear
|
|
|
|
## Third-Party Packages
|
|
|
|
### Theming
|
|
- **tofu_expressive**: https://pub.dev/packages/tofu_expressive
|
|
- M3 Expressive theme package
|
|
- Dynamic color support
|
|
- Built on flex_color_scheme
|
|
|
|
- **flex_color_scheme**: https://pub.dev/packages/flex_color_scheme
|
|
- Advanced theming
|
|
- Excellent M3 support
|
|
- Color scheme generation
|
|
|
|
### Shapes
|
|
- **Custom shape packages** (search pub.dev for "material 3 shapes")
|
|
|
|
### Animations
|
|
- **spring**: https://pub.dev/packages/spring
|
|
- Spring physics
|
|
- Natural motion
|
|
|
|
- **loading_animation_widget**: https://pub.dev/packages/loading_animation_widget
|
|
- Pre-built loading animations
|
|
- Various styles
|
|
|
|
## Community Resources
|
|
|
|
### Articles & Tutorials
|
|
- **Medium - Material 3 Expressive in Flutter**:
|
|
- Search for latest community implementations
|
|
- Developer experiences
|
|
- Custom component examples
|
|
|
|
### GitHub Repositories
|
|
- **material-3-expressive-catalog** (Android Compose):
|
|
- https://github.com/meticha/material-3-expressive-catalog
|
|
- Reference for component behavior
|
|
- Jetpack Compose examples (can inspire Flutter implementations)
|
|
|
|
## Android Compose (For Reference)
|
|
|
|
While this skill focuses on Flutter, Android Compose has official M3 Expressive support that can serve as a reference:
|
|
|
|
- **Compose Material3**: https://developer.android.com/jetpack/compose/designsystems/material3
|
|
- **M3 Expressive Components** (alpha):
|
|
```gradle
|
|
implementation "androidx.compose.material3:material3:1.4.0-alpha14"
|
|
```
|
|
|
|
## Design Tools
|
|
|
|
### Figma
|
|
- **Material 3 Design Kit**: https://www.figma.com/community/file/1035203688168086460
|
|
- **Material Shapes Library**: Expressive shapes for Figma
|
|
|
|
### Color Tools
|
|
- **Material Theme Builder**: https://m3.material.io/theme-builder
|
|
- Generate color schemes
|
|
- Export for Flutter
|
|
|
|
## Research & Background
|
|
|
|
### Google Design Blog
|
|
- **Better, Easier, Emotional UX**: Research behind M3 Expressive
|
|
- 46 studies with 18,000+ participants
|
|
- 4x faster action discovery
|
|
- Improved user sentiment
|
|
|
|
### Key Findings
|
|
- Users rated M3 Expressive designs higher for:
|
|
- Energetic
|
|
- Emotive
|
|
- Positive vibe
|
|
- Creative
|
|
- Playful
|
|
- Friendly
|
|
|
|
## Staying Updated
|
|
|
|
### Official Channels
|
|
- **Material Design Blog**: https://material.io/blog
|
|
- **Flutter Dev Blog**: https://medium.com/flutter
|
|
- **Flutter Newsletter**: https://flutter.dev/community
|
|
|
|
### Community
|
|
- **Flutter Discord**: https://discord.gg/flutter
|
|
- **r/FlutterDev**: Reddit community
|
|
- **Stack Overflow**: [flutter] + [material-design-3]
|
|
|
|
## Version Information
|
|
|
|
As of February 2026:
|
|
- **Flutter SDK**: 3.32+
|
|
- **Dart**: 3.8+
|
|
- **Material 3**: Fully supported in Flutter
|
|
- **M3 Expressive**: Custom implementation required (official support in development)
|
|
|
|
## Getting Help
|
|
|
|
1. **Flutter Documentation**: First stop for official guidance
|
|
2. **GitHub Issues**: Report bugs, request features
|
|
3. **Stack Overflow**: Technical questions
|
|
4. **Discord**: Community support
|
|
5. **This Skill**: Internal reference and best practices
|
|
|
|
## Contribution Opportunities
|
|
|
|
While official M3 Expressive is paused in Flutter, community contributions are valuable:
|
|
|
|
- Create third-party packages for M3E components
|
|
- Share implementation patterns
|
|
- Document best practices
|
|
- Build example apps
|
|
|
|
Check the GitHub issue for updates on when contributions will be accepted into Flutter core.
|