app_bar_m3e

Expressive App Bar for Flutter (Material 3 Expressive).
Small (standard) bar for Scaffold.appBar, plus Medium & Large collapsing variants via a sliver.

Uses m3e_design tokens for color, typography, spacing, and shapes.

Monorepo Setup

Place alongside m3e_design in your repo:

packages/
  m3e_design/
  app_bar_m3e/

pubspec.yaml references ../m3e_design by default.

API

Small App Bar

AppBarM3E(
  leading: IconButton(icon: const BackButtonIcon(), onPressed: () {}),
  titleText: 'Inbox',
  actions: [IconButton(icon: const Icon(Icons.search), onPressed: () {})],
  centerTitle: false,
  shapeFamily: AppBarM3EShapeFamily.round,
  density: AppBarM3EDensity.regular,
);

Use in a Scaffold:

Scaffold(
  appBar: const AppBarM3E(titleText: 'Inbox'),
  body: ...
);

Sliver App Bar (Medium / Large)

CustomScrollView(
  slivers: [
    SliverAppBarM3E(
      variant: AppBarM3EVariant.large,
      titleText: 'Gallery',
      pinned: true,
    ),
    // ... content slivers
  ],
);

variant: medium uses expanded height ≈112dp (collapses to ~64dp).
variant: large uses expanded height ≈152dp (collapses to ~64dp).
Colors, shapes, and typography come from m3e_design's M3ETheme extension.

Theme Integration

app_bar_m3e reads the M3ETheme extension from your ThemeData:

final m3e = Theme.of(context).extension<M3ETheme>() ??
            M3ETheme.defaults(Theme.of(context).colorScheme);

It uses:

m3e.colors.surfaceContainerHigh for background
m3e.type.titleLarge for collapsed titles
m3e.type.headlineSmallEmphasized for expanded titles
m3e.shapes.round|square for container shape
m3e.spacing.md for horizontal padding

Override by supplying backgroundColor, foregroundColor, toolbarHeight, etc.

Notes

For collapsing behavior, use the sliver variant inside a CustomScrollView.
AppBarM3E (small) is a PreferredSizeWidget suitable for Scaffold.appBar.
Medium/Large variants rely on FlexibleSpaceBar for expanded titles.
When density: compact, default heights reduce by ~8dp.

License

MIT

Live demo (Gallery)

Explore this component in the M3E Gallery (GitHub Pages):

https://

To run the Gallery locally:

cd apps/gallery
flutter run -d chrome

Last updated: 2025-10-23

Detailed Guide

What this package provides

A family of Material 3 Expressive app bars:

AppBarM3E — small/standard bar for Scaffold.appBar.
SliverAppBarM3E — Medium and Large collapsing variants for CustomScrollView.

All variants are powered by m3e_design tokens for consistent color, typography, and shape.

Installation

Monorepo (local path): already configured in this repo. Ensure packages/m3e_design exists.
Pub (when published): add to pubspec.yaml

dependencies:
  app_bar_m3e: ^0.1.0
  m3e_design: ^0.1.0

Minimum SDK: Dart >=3.5.0; Flutter >=3.22.0.

Dependencies

flutter
m3e_design

Quick start

Scaffold(
  appBar: const AppBarM3E(
    titleText: 'Inbox',
  ),
  body: ...,
);

Medium/Large collapsing:

CustomScrollView(
  slivers: [
    SliverAppBarM3E(
      variant: AppBarM3EVariant.large, // or AppBarM3EVariant.medium
      titleText: 'Gallery',
      pinned: true,
    ),
    // content...
  ],
)

Key parameters

titleText: String? — Text title when you don't pass a custom title widget.
title: Widget? — Custom title; overrides titleText.
leading: Widget? — Leading widget (e.g. Back button).
actions: List
centerTitle: bool — Centers the title on platforms that prefer it.
backgroundColor / foregroundColor: Color? — Override token-driven colors.
density: AppBarM3EDensity — compact/regular.
shapeFamily: AppBarM3EShapeFamily — round or square corners.
variant (SliverAppBarM3E): medium or large.
pinned / floating / snap (Sliver): Standard sliver app bar behaviors.

Theming with m3e_design

App bars read the M3ETheme extension from ThemeData. Example:

final base = ThemeData(colorScheme: ColorScheme.fromSeed(seedColor: Colors.teal));
final m3e = M3ETheme.defaults(base.colorScheme);
final theme = base.copyWith(extensions: [m3e]);

Accessibility

Meets 48×48 dp minimum hit target recommendations via tokens.
Proper contrast from token-driven color system.