material_3_expressive/packages/button_group_m3e
2025-11-12 14:17:00 +01:00
..
lib Add expanded and linearMainAxisAlignment options to ButtonGroupM3E for improved layout control 2025-11-12 14:17:00 +01:00
test Add ButtonGroupM3E component with overflow handling and update API to use actions 2025-11-12 12:51:29 +01:00
CHANGELOG.md Add expanded and linearMainAxisAlignment options to ButtonGroupM3E for improved layout control 2025-11-12 14:17:00 +01:00
LICENSE Add MIT licenses to all packages under packages/ directory for legal compliance. 2025-10-23 18:20:16 +02:00
melos_button_group_m3e.iml Add initial configuration, tokens, and widgets for M3E components 2025-10-21 22:15:15 +02:00
pubspec.yaml Add expanded and linearMainAxisAlignment options to ButtonGroupM3E for improved layout control 2025-11-12 14:17:00 +01:00
pubspec_overrides.yaml Add ButtonGroupM3E component with overflow handling and update API to use actions 2025-11-12 12:51:29 +01:00
README.md Add ButtonGroupM3E component with overflow handling and update API to use actions 2025-11-12 12:51:29 +01:00

button_group_m3e

Material 3 Expressive grouped button layout and overflow management.

Current API (0.3.0)

children has been removed. Provide actions: List<ButtonGroupM3EAction>.

ButtonGroupM3E(
  actions: [
    ButtonGroupM3EAction(label: const Text('One'), onPressed: () {}),
    ButtonGroupM3EAction(label: const Text('Two'), onPressed: () {}),
    ButtonGroupM3EAction(label: const Text('Three'), onPressed: () {}),
  ],
  overflow: ButtonGroupM3EOverflow.menu, // default
)

Actions

class ButtonGroupM3EAction {
  const ButtonGroupM3EAction({
    required Widget label,
    Widget? icon,
    VoidCallback? onPressed,
    bool enabled = true,
    ButtonM3EStyle style = ButtonM3EStyle.filled,
    bool toggleable = false,
    bool selected = false,
    ValueChanged<bool>? onSelectedChange,
    ButtonM3EShape? shape,
  });
}

Group selection

Enable segmented styling:

int selectedIndex = 0;
ButtonGroupM3E(
  groupSelection: true,
  selectedIndex: selectedIndex,
  actions: [
    ButtonGroupM3EAction(label: const Text('Day'), onPressed: () => setState(() => selectedIndex = 0)),
    ButtonGroupM3EAction(label: const Text('Week'), onPressed: () => setState(() => selectedIndex = 1)),
    ButtonGroupM3EAction(label: const Text('Month'), onPressed: () => setState(() => selectedIndex = 2)),
  ],
)

Shape rules when groupSelection is true:

  • Selected button: fully round.
  • First & last (unselected): round.
  • Middle unselected buttons: square.

Overflow

  • menu (default): shows what fits + overflow trigger with remaining actions in a bottom sheet.
  • scroll: scrolls along main axis when constrained.
  • none: no handling (may overflow if parent allows).

Other parameters

  • type: standard | connected (divider seams, zero spacing)
  • shape: square | round (base shape family)
  • size: xs | sm | md | lg | xl
  • density: regular | compact
  • Layout: direction, wrap, spacing, runSpacing, alignment options.
  • equalizeWidths: enforce min widths per size for even visual rhythm.

Versioning

0.3.0 BREAKING: removed children. Use actions.

License

See LICENSE.