SegmentedControl class

A highly customizable animated segmented control widget.

This widget displays a horizontal row of segments and animates a selection indicator between them. It is fully configurable through the style property, which takes a SegmentedControlStyle object.

{@tool snippet} Basic usage:

SegmentedControl(
  segments: const [
    Text('First'),
    Text('Second'),
  ],
  onSegmentSelected: (index) {
    // Handle selection change
  },
  style: SegmentedControl.styleFrom(
    backgroundColor: Colors.grey.shade300,
    indicatorColor: Colors.orange,
    indicatorElevation: 2,
  ),
)

{@end-tool}

Inheritance

Constructors

SegmentedControl({Key? key, required List<Widget> segments, int initialIndex = 0, ValueChanged<int>? onSegmentSelected, Duration duration = const Duration(milliseconds: 300), Curve curve = Curves.easeInOut, SegmentedControlStyle style = const SegmentedControlStyle()})
Creates a customizable animated segmented control.
const

Properties

curve → Curve
The curve to use for the indicator's sliding animation.
final
duration → Duration
The duration of the animation when sliding the indicator between segments.
final
hashCode → int
The hash code for this object.
no setterinherited
initialIndex → int
The index of the segment that is selected by default.
final
key → Key?
Controls how one widget replaces another widget in the tree.
finalinherited
onSegmentSelected → ValueChanged<int>?
A callback that is invoked when a new segment is tapped and selected.
final
runtimeType → Type
A representation of the runtime type of the object.
no setterinherited
segments → List<Widget>
The list of widgets to display as the segments.
final
style → SegmentedControlStyle
The visual style configuration for the control.
final

Methods

createElement() → StatefulElement
Creates a StatefulElement to manage this widget's location in the tree.
inherited
createState() → State<SegmentedControl>
Creates the mutable state for this widget at a given location in the tree.
override
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

Static Methods

styleFrom({BorderRadius? borderRadius, Color? borderColor, double? borderWidth, Color? backgroundColor, EdgeInsets? padding, double? elevation, Color? indicatorColor, EdgeInsets? indicatorMargin, double? indicatorElevation, TextStyle? unselectedTextStyle, TextStyle? selectedTextStyle}) → SegmentedControlStyle
A helper method to create a SegmentedControlStyle.