1.8 KiB
1.8 KiB
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
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
ThemeData(
navigationBarTheme: NavigationBarThemeData(
indicatorColor: colorScheme.secondaryContainer,
indicatorShape: const StadiumBorder(),
),
)
Best Practices
- Item Count: Use 3-5 destinations. For more, use a Navigation Rail or Drawer.
- Icons vs Labels: Use icons that are meaningful. If labels are hidden, icons must be unmistakable.
- Badge integration: Use
Badgewidgets to show updates or notifications on nav items.