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.