MSSegmentedControl<T> class
A tab-bar-style segmented control component for Magic Starter.
Renders a horizontal row of segments where exactly one is active at a time.
The active segment activates the selected: state prefix in its className
so callers can supply selected:bg-surface selected:text-fg tokens (the
defaults come from the slot recipe).
Behaviour on a narrow surface
Every segment is a loosely fitted Flexible, so the row adapts instead of
overflowing: a segment keeps its content width while the labels fit, and is
capped at an equal share of the row once they do not, at which point its
label wraps onto another line. Labels are never shortened from the right,
because a segment can carry a localised sentence (Annual · save ~15%) and
an ellipsis would cut it before its meaning is complete.
The fit is FlexFit.loose rather than Expanded on purpose. Tight fits would stretch the control across the full width of any bounded parent, and would assert inside a horizontally unbounded one (a scrolling row, an intrinsic-width measure); loose fitting shrink-wraps in the first case and falls back to content width in the second.
A caller that overrides the root slot into a wrapping, vertical, or
horizontally scrolling container (classNames: {'root': 'wrap'},
flex-col, overflow-x-auto) keeps the older behaviour: the segments stay
at content width and the container places them, since only a horizontal
flex over a bounded width can hand a segment a share of it.
Example Usage:
MSSegmentedControl<String>(
options: const ['Monthly', 'Annual'],
selectedIndex: _selected,
onChanged: (i) => setState(() => _selected = i),
)
- Inheritance
-
- Object
- DiagnosticableTree
- Widget
- StatelessWidget
- MSSegmentedControl
- Annotations
Constructors
-
MSSegmentedControl({Key? key, required List<
String> options, required int selectedIndex, ValueChanged<int> ? onChanged, SegmentedControlSize size = SegmentedControlSize.md, Map<String, String> ? classNames}) -
Creates a MSSegmentedControl widget.
const
Properties
-
classNames
→ Map<
String, String> ? -
Per-slot className overrides appended after the recipe output.
final
- hashCode → int
-
The hash code for this object.
no setterinherited
- key → Key?
-
Controls how one widget replaces another widget in the tree.
finalinherited
-
onChanged
→ ValueChanged<
int> ? -
Called when the user taps a segment, with its zero-based index.
final
-
options
→ List<
String> -
The label displayed for each segment, in display order.
final
- runtimeType → Type
-
A representation of the runtime type of the object.
no setterinherited
- selectedIndex → int
-
The zero-based index of the currently selected segment.
final
- size → SegmentedControlSize
-
Visual size variant; defaults to SegmentedControlSize.md.
final
Methods
-
build(
BuildContext context) → Widget -
Describes the part of the user interface represented by this widget.
override
-
createElement(
) → StatelessElement -
Creates a StatelessElement to manage this widget's location in the tree.
inherited
-
debugDescribeChildren(
) → List< DiagnosticsNode> -
Returns a list of DiagnosticsNode objects describing this node's
children.
inherited
-
debugFillProperties(
DiagnosticPropertiesBuilder properties) → void -
Add additional properties associated with the node.
inherited
-
noSuchMethod(
Invocation invocation) → dynamic -
Invoked when a nonexistent method or property is accessed.
inherited
-
toDiagnosticsNode(
{String? name, DiagnosticsTreeStyle? style}) → DiagnosticsNode -
Returns a debug representation of the object that is used by debugging
tools and by DiagnosticsNode.toStringDeep.
inherited
-
toString(
{DiagnosticLevel minLevel = DiagnosticLevel.info}) → String -
A string representation of this object.
inherited
-
toStringDeep(
{String prefixLineOne = '', String? prefixOtherLines, DiagnosticLevel minLevel = DiagnosticLevel.debug, int wrapWidth = 65}) → String -
Returns a string representation of this node and its descendants.
inherited
-
toStringShallow(
{String joiner = ', ', DiagnosticLevel minLevel = DiagnosticLevel.debug}) → String -
Returns a one-line detailed description of the object.
inherited
-
toStringShort(
) → String -
A short, textual description of this widget.
inherited
Operators
-
operator ==(
Object other) → bool -
The equality operator.
inherited