toolbar_m3e

Material 3 Expressive toolbar for Flutter – a compact action bar that can host a title/subtitle, leading widget, inline actions, and an overflow menu. All styling is driven by m3e_design tokens.

  • ToolbarM3E — the main toolbar widget (PreferredSizeWidget) for use in Scaffold or as a standalone header
  • ToolbarActionM3E — action model consumed by the toolbar
  • Inline actions render as icon buttons; extra actions go into a PopupMenuButton overflow

Monorepo Layout

packages/
  m3e_design/
  toolbar_m3e/

pubspec.yaml references ../m3e_design.

Usage

import 'package:toolbar_m3e/toolbar_m3e.dart';

final actions = [
  ToolbarActionM3E(
    icon: Icons.search,
    onPressed: () {},
    tooltip: 'Search',
  ),
  ToolbarActionM3E(
    icon: Icons.share_outlined,
    onPressed: () {},
    tooltip: 'Share',
  ),
  ToolbarActionM3E(
    icon: Icons.delete_outline,
    onPressed: () {},
    tooltip: 'Delete',
    isDestructive: true,
    label: 'Delete', // used in overflow
  ),
];

ToolbarM3E(
  leading: const BackButton(),
  titleText: 'Selection',
  subtitleText: '3 items',
  actions: actions,
  maxInlineActions: 2, // remaining actions go to overflow
  variant: ToolbarM3EVariant.tonal, // surface | tonal | primary
  size: ToolbarM3ESize.medium,      // small | medium | large
  density: ToolbarM3EDensity.regular,
  shapeFamily: ToolbarM3EShapeFamily.round,
  centerTitle: false,
);

Tokens mapping

  • Container: surfaceContainerHigh (surface) / secondaryContainer (tonal) / primaryContainer (primary)
  • Foreground: onSurface / onSecondaryContainer / onPrimaryContainer
  • Shape: uses M3E round / square set (md radius)
  • Heights: small ≈40dp, medium ≈48dp, large ≈56dp
  • Icon size: 24dp
  • Padding: horizontal from tokens (spacing.md)

Overflow

Set maxInlineActions to the number of actions that should stay inline. Any additional actions go to the overflow menu (labels pulled from label or tooltip/semanticLabel). Destructive actions can be highlighted by isDestructive: true.

Accessibility

  • Provide semanticLabel on the toolbar if useful.
  • Actions expose tooltip and can set semanticLabel to improve assistive tech hints.

License

MIT

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

ToolbarM3E with token-driven size, density, color, shape, and overflow handling (e.g., automatic menu when there isn’t enough space).

Installation

  • Monorepo (local path): already configured alongside m3e_design and button/icon packages.
  • Pub (when published):
dependencies:
  toolbar_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

ToolbarM3E(
  actions: [
    ToolbarActionM3E(icon: Icons.copy, onPressed: () {}),
    ToolbarActionM3E(icon: Icons.paste, onPressed: () {}),
    ToolbarActionM3E(icon: Icons.delete_outline, onPressed: () {}),
  ],
  overflowBehavior: ToolbarOverflowBehaviorM3E.menu,
)

Key parameters

  • actions: List
  • overflowBehavior: menu | wrap | clip — How to handle overflow.
  • density: compact | regular — Affects height and spacing.
  • backgroundColor / foregroundColor: Color? overrides.
  • shapeFamily: round | square.

Theming with m3e_design

Toolbar colors, shape, and spacing come from M3ETheme tokens; density adjusts measurements.

Accessibility

  • Buttons maintain 48×48dp minimum; provide tooltips/semantics for each action.

Libraries

toolbar_m3e