Add expanded and linearMainAxisAlignment options to ButtonGroupM3E for improved layout control
This commit is contained in:
Emily Pauli
parent
582af894f3
commit
76daccbc71
6 changed files with 101 additions and 27 deletions
|
|
@ -1,3 +1,8 @@
|
|||
## 0.3.1
|
||||
- New: `expanded` and `linearMainAxisAlignment` options for non-wrap layouts. When `expanded` is true, the group uses `MainAxisSize.max` and aligns items per `linearMainAxisAlignment` (or mapped from `alignment`). This enables internal center/right alignment without extra wrappers.
|
||||
- Fix: Connected + menu overflow now consistently inserts a 2px gap before the overflow trigger (when `showDividers=false`) and uses a stricter width-fitting algorithm with a small epsilon to eliminate minor RenderFlex overflows.
|
||||
- UX: Dropdown overflow popup is anchored bottom-right of the overflow button, has intrinsic width to fit its buttons, and aligns its internal buttons to the right.
|
||||
|
||||
## 0.3.0
|
||||
- Breaking: Removed legacy `children` parameter. Use `actions: List<ButtonGroupM3EAction>` instead.
|
||||
- Breaking: Renamed `groupSelection` API to `selection` for clarity.
|
||||
|
|
|
|||
|
|
@ -98,6 +98,8 @@ class ButtonGroupM3E extends StatefulWidget {
|
|||
this.selection = false,
|
||||
this.selectedIndex,
|
||||
this.overflowMenuStyle = ButtonGroupM3EOverflowMenuStyle.dropdown,
|
||||
this.expanded = false,
|
||||
this.linearMainAxisAlignment,
|
||||
});
|
||||
|
||||
/// Declarative actions to build buttons. Overrides [children] when not empty.
|
||||
|
|
@ -146,6 +148,13 @@ class ButtonGroupM3E extends StatefulWidget {
|
|||
/// How to display the overflow menu when [overflow] == menu. Defaults to dropdown.
|
||||
final ButtonGroupM3EOverflowMenuStyle overflowMenuStyle;
|
||||
|
||||
/// When true, Row/Column uses MainAxisSize.max enabling internal end alignment.
|
||||
final bool expanded;
|
||||
|
||||
/// Explicit mainAxis alignment for non-wrap (Row/Column) layouts.
|
||||
/// If null falls back to mapping of [alignment] (WrapAlignment) for convenience.
|
||||
final MainAxisAlignment? linearMainAxisAlignment;
|
||||
|
||||
bool get _connected => type == ButtonGroupM3EType.connected;
|
||||
|
||||
@override
|
||||
|
|
@ -270,14 +279,23 @@ class _ButtonGroupM3EState extends State<ButtonGroupM3E> {
|
|||
final list = _buildItemList(
|
||||
context, spacing, dividerColor, dividerThickness,
|
||||
count: _effectiveActions.length);
|
||||
|
||||
final mainAlign =
|
||||
widget.linearMainAxisAlignment ?? _mapWrapToMain(widget.alignment);
|
||||
final mainSize = widget.expanded ? MainAxisSize.max : MainAxisSize.min;
|
||||
|
||||
return widget.direction == Axis.horizontal
|
||||
? Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
mainAxisSize: mainSize,
|
||||
mainAxisAlignment:
|
||||
widget.expanded ? mainAlign : MainAxisAlignment.start,
|
||||
crossAxisAlignment: _mapCross(widget.crossAxisAlignment),
|
||||
children: list,
|
||||
)
|
||||
: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
mainAxisSize: mainSize,
|
||||
mainAxisAlignment:
|
||||
widget.expanded ? mainAlign : MainAxisAlignment.start,
|
||||
crossAxisAlignment: _mapCross(widget.crossAxisAlignment),
|
||||
children: list,
|
||||
);
|
||||
|
|
@ -289,6 +307,10 @@ class _ButtonGroupM3EState extends State<ButtonGroupM3E> {
|
|||
final list = _buildItemList(
|
||||
context, spacing, dividerColor, dividerThickness,
|
||||
count: _effectiveActions.length);
|
||||
|
||||
final mainAlign =
|
||||
widget.linearMainAxisAlignment ?? _mapWrapToMain(widget.alignment);
|
||||
|
||||
return LayoutBuilder(
|
||||
builder: (context, constraints) {
|
||||
final isBounded = widget.direction == Axis.horizontal
|
||||
|
|
@ -297,12 +319,18 @@ class _ButtonGroupM3EState extends State<ButtonGroupM3E> {
|
|||
|
||||
final core = widget.direction == Axis.horizontal
|
||||
? Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
mainAxisSize:
|
||||
widget.expanded ? MainAxisSize.max : MainAxisSize.min,
|
||||
mainAxisAlignment:
|
||||
widget.expanded ? mainAlign : MainAxisAlignment.start,
|
||||
crossAxisAlignment: _mapCross(widget.crossAxisAlignment),
|
||||
children: list,
|
||||
)
|
||||
: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
mainAxisSize:
|
||||
widget.expanded ? MainAxisSize.max : MainAxisSize.min,
|
||||
mainAxisAlignment:
|
||||
widget.expanded ? mainAlign : MainAxisAlignment.start,
|
||||
crossAxisAlignment: _mapCross(widget.crossAxisAlignment),
|
||||
children: list,
|
||||
);
|
||||
|
|
@ -444,17 +472,25 @@ class _ButtonGroupM3EState extends State<ButtonGroupM3E> {
|
|||
}
|
||||
|
||||
final coreChildren = visibleList;
|
||||
final mainAlign =
|
||||
widget.linearMainAxisAlignment ?? _mapWrapToMain(widget.alignment);
|
||||
final core = widget.direction == Axis.horizontal
|
||||
? ClipRect(
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
mainAxisSize:
|
||||
widget.expanded ? MainAxisSize.max : MainAxisSize.min,
|
||||
mainAxisAlignment:
|
||||
widget.expanded ? mainAlign : MainAxisAlignment.start,
|
||||
crossAxisAlignment: _mapCross(widget.crossAxisAlignment),
|
||||
children: coreChildren,
|
||||
),
|
||||
)
|
||||
: ClipRect(
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
mainAxisSize:
|
||||
widget.expanded ? MainAxisSize.max : MainAxisSize.min,
|
||||
mainAxisAlignment:
|
||||
widget.expanded ? mainAlign : MainAxisAlignment.start,
|
||||
crossAxisAlignment: _mapCross(widget.crossAxisAlignment),
|
||||
children: coreChildren,
|
||||
),
|
||||
|
|
@ -765,6 +801,15 @@ class _ButtonGroupM3EState extends State<ButtonGroupM3E> {
|
|||
}
|
||||
}
|
||||
|
||||
MainAxisAlignment _mapWrapToMain(WrapAlignment w) => switch (w) {
|
||||
WrapAlignment.start => MainAxisAlignment.start,
|
||||
WrapAlignment.end => MainAxisAlignment.end,
|
||||
WrapAlignment.center => MainAxisAlignment.center,
|
||||
WrapAlignment.spaceBetween => MainAxisAlignment.spaceBetween,
|
||||
WrapAlignment.spaceAround => MainAxisAlignment.spaceAround,
|
||||
WrapAlignment.spaceEvenly => MainAxisAlignment.spaceEvenly,
|
||||
};
|
||||
|
||||
Widget _buildOverflowTrigger(
|
||||
BuildContext context,
|
||||
double spacing,
|
||||
|
|
@ -830,7 +875,6 @@ class _ButtonGroupM3EState extends State<ButtonGroupM3E> {
|
|||
_removeOverflowEntry();
|
||||
|
||||
final overlay = Overlay.of(context, rootOverlay: true);
|
||||
if (overlay == null) return;
|
||||
|
||||
_overflowEntry = OverlayEntry(
|
||||
builder: (ctx) {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
name: button_group_m3e
|
||||
description: Wrapper-only Button Group for Material 3 Expressive (layout, shape, size propagation).
|
||||
version: 0.3.0
|
||||
version: 0.3.1
|
||||
repository: https://github.com/EmilyMoonstone/material_3_expressive/tree/main/packages/button_group_m3e
|
||||
issue_tracker: https://github.com/EmilyMonestone/material_3_expressive/issues
|
||||
|
||||
|
|
|
|||
|
|
@ -1,2 +1,5 @@
|
|||
## 0.3.7
|
||||
- Updated button_group_m3e to 0.3.1.
|
||||
|
||||
## 0.1.0
|
||||
- Changelog initialized.
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
name: m3e_collection
|
||||
description: Aggregated exports of all Material 3 Expressive components for Flutter.
|
||||
version: 0.3.6
|
||||
version: 0.3.7
|
||||
repository: https://github.com/EmilyMoonstone/material_3_expressive/tree/main/packages/m3e_collection
|
||||
issue_tracker: https://github.com/EmilyMonestone/material_3_expressive/issues
|
||||
|
||||
|
|
@ -9,7 +9,7 @@ environment:
|
|||
|
||||
dependencies:
|
||||
app_bar_m3e: ^0.1.2
|
||||
button_group_m3e: ^0.3.0
|
||||
button_group_m3e: ^0.3.1
|
||||
button_m3e: ^0.1.2
|
||||
expressive_refresh: ^0.1.2
|
||||
fab_m3e: ^0.1.1
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue