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

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.

SliverAppBar.large(
  title: const Text('Expressive Page'),
  actions: [
    IconButton(icon: const Icon(Icons.settings), onPressed: () {}),
  ],
)

Best Practices

Scrolling behavior: Use pinned: true or floating: true appropriately in CustomScrollView.
Action limits: Keep actions to 3 max. Use an overflow menu for more.
Contrast: Ensure text/icons have at least 4.5:1 contrast against the app bar surface.

2.1 KiB Raw Permalink Blame History