150 lines
4.1 KiB
Markdown
150 lines
4.1 KiB
Markdown
# FAB Menu - M3 Expressive Component
|
|
|
|
## Overview
|
|
|
|
The FAB Menu is an expressive pattern where a Floating Action Button (FAB) expands to reveal multiple related actions. It uses springy animations and shape morphing to create a seamless transition from a single button to a list of actions.
|
|
|
|
## Design Principles
|
|
|
|
- **Primary Action Focus**: The main FAB should represent the most common action.
|
|
- **Organic Expansion**: Use spatial springs for the expansion animation so it feels like it's growing.
|
|
- **Clear Secondary Actions**: Actions revealed should be clearly labeled or have distinct icons.
|
|
- **Dismissability**: Users should be able to easily collapse the menu by tapping the main button again or tapping outside.
|
|
|
|
## Implementation in Flutter
|
|
|
|
### Basic FAB Menu
|
|
|
|
```dart
|
|
class ExpressiveFabMenu extends StatefulWidget {
|
|
const ExpressiveFabMenu({super.key});
|
|
|
|
@override
|
|
State<ExpressiveFabMenu> createState() => _ExpressiveFabMenuState();
|
|
}
|
|
|
|
class _ExpressiveFabMenuState extends State<ExpressiveFabMenu>
|
|
with SingleTickerProviderStateMixin {
|
|
bool _isOpen = false;
|
|
late AnimationController _controller;
|
|
late Animation<double> _expandAnimation;
|
|
|
|
@override
|
|
void initState() {
|
|
super.initState();
|
|
_controller = AnimationController(
|
|
value: _isOpen ? 1.0 : 0.0,
|
|
duration: const Duration(milliseconds: 250),
|
|
vsync: this,
|
|
);
|
|
_expandAnimation = CurvedAnimation(
|
|
curve: Curves.fastOutSlowIn,
|
|
reverseCurve: Curves.easeOutQuad,
|
|
parent: _controller,
|
|
);
|
|
}
|
|
|
|
void _toggle() {
|
|
setState(() {
|
|
_isOpen = !_isOpen;
|
|
if (_isOpen) {
|
|
_controller.forward();
|
|
} else {
|
|
_controller.reverse();
|
|
}
|
|
});
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Column(
|
|
mainAxisSize: MainAxisSize.min,
|
|
crossAxisAlignment: CrossAxisAlignment.end,
|
|
children: [
|
|
_buildStep(0, Icons.camera, 'Camera'),
|
|
_buildStep(1, Icons.photo, 'Gallery'),
|
|
_buildStep(2, Icons.videocam, 'Video'),
|
|
const SizedBox(height: 16),
|
|
FloatingActionButton.large(
|
|
onPressed: _toggle,
|
|
child: AnimatedIcon(
|
|
icon: AnimatedIcons.menu_close,
|
|
progress: _expandAnimation,
|
|
),
|
|
),
|
|
],
|
|
);
|
|
}
|
|
|
|
Widget _buildStep(int index, IconData icon, String label) {
|
|
return SizeTransition(
|
|
sizeFactor: _expandAnimation,
|
|
child: FadeTransition(
|
|
opacity: _expandAnimation,
|
|
child: Padding(
|
|
padding: const EdgeInsets.symmetric(vertical: 8.0),
|
|
child: Row(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
Card(
|
|
child: Padding(
|
|
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
|
|
child: Text(label),
|
|
),
|
|
),
|
|
const SizedBox(width: 8),
|
|
FloatingActionButton.small(
|
|
onPressed: () {},
|
|
heroTag: 'fab_$index',
|
|
child: Icon(icon),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|
|
```
|
|
|
|
### Advanced Morphing FAB (tofu_expressive style)
|
|
|
|
For a more expressive feel, the main FAB can morph into a larger container.
|
|
|
|
```dart
|
|
// Placeholder for morphing logic
|
|
// Use AnimatedContainer + Stack to transition FAB into a menu surface
|
|
```
|
|
|
|
## Best Practices
|
|
|
|
1. **Limit Actions**: Don't exceed 5 secondary actions to avoid clutter.
|
|
2. **Animation Speed**: Expansion should be fast (200-300ms) to feel responsive.
|
|
3. **Accessibility**: Use `Semantics` to label the menu state (e.g., "Expand actions menu" vs "Collapse actions menu").
|
|
4. **Scrim**: Consider adding a subtle scrim (darkened background) when the menu is open to focus attention.
|
|
|
|
## Accessibility
|
|
|
|
```dart
|
|
Semantics(
|
|
label: _isOpen ? 'Close menu' : 'Open action menu',
|
|
button: true,
|
|
child: FloatingActionButton(...),
|
|
)
|
|
```
|
|
|
|
## Android Compose Reference
|
|
|
|
```kotlin
|
|
@Composable
|
|
fun ExpressiveFabMenu() {
|
|
// Jetpack Compose implementation using AnimatedVisibility and FAB
|
|
}
|
|
```
|
|
|
|
## Related Components
|
|
|
|
- [Split Buttons](split-buttons.md)
|
|
- [Button Groups](button-groups.md)
|
|
- [Toolbars](toolbars.md)
|