70 lines
2.1 KiB
Markdown
70 lines
2.1 KiB
Markdown
# App Bars - M3 Expressive Component
|
|
|
|
## Overview
|
|
|
|
App bars in M3 Expressive focus on clarity and accessibility. They often feature larger touch targets, more expressive typography, and can morph into search bars or other functional elements.
|
|
|
|
## Design Principles
|
|
|
|
- **Hierarchical Titles**: Use `titleLarge` for primary views and `titleMedium` for sub-sections.
|
|
- **Expressive Search**: Search-integrated app bars are a core pattern.
|
|
- **Surface Elevation**: Use color and subtle shadows to separate the app bar from content.
|
|
- **Responsive Heights**: Heights can vary based on scroll state (e.g., shrinking on scroll).
|
|
|
|
## Implementation in Flutter
|
|
|
|
### Expressive Search App Bar
|
|
|
|
```dart
|
|
class SearchAppBar extends StatelessWidget implements PreferredSizeWidget {
|
|
final TextEditingController controller;
|
|
|
|
const SearchAppBar({super.key, required this.controller});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final colorScheme = Theme.of(context).colorScheme;
|
|
|
|
return AppBar(
|
|
title: SearchBar(
|
|
controller: controller,
|
|
hintText: 'Search...',
|
|
leading: const Icon(Icons.search),
|
|
elevation: WidgetStateProperty.all(0),
|
|
backgroundColor: WidgetStateProperty.all(colorScheme.surfaceContainerHigh),
|
|
shape: WidgetStateProperty.all(const StadiumBorder()),
|
|
),
|
|
centerTitle: true,
|
|
);
|
|
}
|
|
|
|
@override
|
|
Size get preferredSize => const Size.fromHeight(kToolbarHeight + 16);
|
|
}
|
|
```
|
|
|
|
### Large/Medium App Bars
|
|
|
|
Use Flutter's built-in `SliverAppBar.large` or `SliverAppBar.medium` for expressive titles.
|
|
|
|
```dart
|
|
SliverAppBar.large(
|
|
title: const Text('Expressive Page'),
|
|
actions: [
|
|
IconButton(icon: const Icon(Icons.settings), onPressed: () {}),
|
|
],
|
|
)
|
|
```
|
|
|
|
## Best Practices
|
|
|
|
1. **Scrolling behavior**: Use `pinned: true` or `floating: true` appropriately in `CustomScrollView`.
|
|
2. **Action limits**: Keep actions to 3 max. Use an overflow menu for more.
|
|
3. **Contrast**: Ensure text/icons have at least 4.5:1 contrast against the app bar surface.
|
|
|
|
## Related Components
|
|
|
|
- [Toolbars](toolbars.md)
|
|
- [Typography](../typography-guide.md)
|
|
- [Navigation Bar](navigation-bar.md)
|