Nexus/material_3_expressive
2
0
Fork 0
forked from mirrors/material_3_expressive
Code Pull requests Activity
material_3_expressive/packages/button_m3e
History
Exact
Emily Pauli 582af894f3 Add ButtonGroupM3E component with overflow handling and update API to use actions
2025-11-12 12:51:29 +01:00
..
lib Add ButtonGroupM3E component with overflow handling and update API to use actions 2025-11-12 12:51:29 +01:00
test Refactor button component and add new sections for loading indicators, icons, and navigation; update enums and pubspec description 2025-10-21 23:40:25 +02:00
CHANGELOG.md Add ButtonGroupM3E component with overflow handling and update API to use actions 2025-11-12 12:51:29 +01:00
LICENSE Refactor button component and add new sections for loading indicators, icons, and navigation; update enums and pubspec description 2025-10-21 23:40:25 +02:00
melos_button_m3e.iml Add initial configuration, tokens, and widgets for M3E components 2025-10-21 22:15:15 +02:00
pubspec.yaml Add ButtonGroupM3E component with overflow handling and update API to use actions 2025-11-12 12:51:29 +01:00
pubspec_overrides.yaml Add dependency overrides for local packages in pubspec_overrides.yaml 2025-10-25 22:58:23 +02:00
README.md Remove unused dynamic field lookup and redundant utility methods; clean up pubspec dependency paths and update READMEs with detailed package guides. 2025-10-23 18:12:39 +02:00

README.md

button_m3e

Material 3 Expressive Buttons for Flutter — sizes XS→XL, round/square shapes, toggle selection, and 5 styles (filled/tonal/elevated/outlined/text).

See lib/src/button_tokens_adapter.dart for measurements & color mapping.

Live demo (Gallery)

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

https://.github.io/material_3_expressive/

To run the Gallery locally:

cd apps/gallery
flutter run -d chrome

Last updated: 2025-10-23

Detailed Guide

What this package provides

Material 3 Expressive buttons with 5 variants (filled, tonal, elevated, outlined, text), sizes XS–XL, round/square shapes, and optional toggle selection.

Installation

  • Monorepo (local path): already configured in this repo alongside m3e_design.
  • Pub (when published):
dependencies:
  button_m3e: ^0.1.0
  m3e_design: ^0.1.0

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

Dependencies

  • flutter
  • m3e_design

Quick start

ButtonM3E.filled(
  onPressed: () {},
  label: const Text('Save'),
  icon: const Icon(Icons.save),
  size: ButtonM3ESize.md,
  shapeFamily: ButtonM3EShapeFamily.round,
);

Key parameters

  • onPressed / onLongPress: callbacks for activation/long-press.
  • label: Widget? — Button label; omit for icon-only variants.
  • icon: Widget? — Optional leading icon.
  • isSelected: bool — Toggle selection state (for toggleable styles).
  • variant/style: ButtonM3EVariant — filled | tonal | elevated | outlined | text.
  • size: ButtonM3ESize — xs | sm | md | lg | xl.
  • shapeFamily: ButtonM3EShapeFamily — round or square.
  • tooltip / semanticsLabel: String? — Accessibility hints.
  • enabled: bool — Whether the button is interactive.

Theming with m3e_design

Buttons take colors, shapes, and spacing from M3ETheme. Override via properties or ThemeData when needed.

Accessibility

  • Ensures minimum 48×48 dp tap target size via layout tokens.
  • Focus, hover, and pressed states follow Material 3 guidance.

Links