63 lines
1.8 KiB
Markdown
63 lines
1.8 KiB
Markdown
# Navigation Bar - M3 Expressive Component
|
|
|
|
## Overview
|
|
|
|
The Navigation Bar (Bottom Navigation) in M3 Expressive features larger active indicators, expressive shapes (like pills), and improved label hierarchy.
|
|
|
|
## Design Principles
|
|
|
|
- **Clear Active State**: The selected item should be strikingly different (e.g., inside a pill container).
|
|
- **Smooth Transitions**: Animate the active indicator and label property changes.
|
|
- **Expressive Motion**: Use scale and fade for switching views.
|
|
- **Hierarchy**: Use labels for all items if space allows, otherwise only for the active item (less expressive).
|
|
|
|
## Implementation in Flutter
|
|
|
|
### 1. Standard M3 Navigation Bar
|
|
|
|
```dart
|
|
NavigationBar(
|
|
selectedIndex: _currentIndex,
|
|
onDestinationSelected: (idx) => setState(() => _currentIndex = idx),
|
|
destinations: const [
|
|
NavigationDestination(
|
|
icon: Icon(Icons.home_outlined),
|
|
selectedIcon: Icon(Icons.home),
|
|
label: 'Home',
|
|
),
|
|
NavigationDestination(
|
|
icon: Icon(Icons.search),
|
|
label: 'Search',
|
|
),
|
|
NavigationDestination(
|
|
icon: Icon(Icons.person_outline),
|
|
selectedIcon: Icon(Icons.person),
|
|
label: 'Profile',
|
|
),
|
|
],
|
|
)
|
|
```
|
|
|
|
### 2. Expressive Active Indicator Customize
|
|
|
|
```dart
|
|
ThemeData(
|
|
navigationBarTheme: NavigationBarThemeData(
|
|
indicatorColor: colorScheme.secondaryContainer,
|
|
indicatorShape: const StadiumBorder(),
|
|
),
|
|
)
|
|
```
|
|
|
|
## Best Practices
|
|
|
|
1. **Item Count**: Use 3-5 destinations. For more, use a Navigation Rail or Drawer.
|
|
2. **Icons vs Labels**: Use icons that are meaningful. If labels are hidden, icons must be unmistakable.
|
|
3. **Badge integration**: Use `Badge` widgets to show updates or notifications on nav items.
|
|
|
|
## Related Components
|
|
|
|
- [Navigation Rail](navigation-rail.md)
|
|
- [Toolbars](toolbars.md)
|
|
- [App Bars](app-bars.md)
|