SegmentedButton<T> class

A Material button that allows the user to select from limited set of options.

Segmented buttons are used to help people select options, switch views, or sort elements. They are typically used in cases where there are only 2-5 options.

The options are represented by segments described with ButtonSegment entries in the segments field. Each segment has a ButtonSegment.value that is used to indicate which segments are selected.

The selected field is a set of selected ButtonSegment.values. This should be updated by the app in response to onSelectionChanged updates.

By default, only a single segment can be selected (for mutually exclusive choices). This can be relaxed with the multiSelectionEnabled field.

Like ButtonStyleButtons, the SegmentedButton's visuals can be configured with a ButtonStyle style field. However, unlike other buttons, some of the style parameters are applied to the entire segmented button, and others are used for each of the segments.

By default, a checkmark icon is used to show selected items. To configure this behavior, you can use the showSelectedIcon and selectedIcon fields.

Individual segments can be enabled or disabled with their ButtonSegment.enabled flag. If the onSelectionChanged field is null, then the entire segmented button will be disabled, regardless of the individual segment settings.

This sample shows how to display a SegmentedButton with either a single or multiple selection.

To create a local project with this code sample, run:
flutter create --sample=material.SegmentedButton.1 mysample

This sample showcases how to customize SegmentedButton using SegmentedButton.styleFrom.

To create a local project with this code sample, run:
flutter create --sample=material.SegmentedButton.2 mysample

Constructors

SegmentedButton({Key? key, required List<ButtonSegment<T>> segments, required Set<T> selected, void onSelectionChanged(Set<T>)?, bool multiSelectionEnabled = false, bool emptySelectionAllowed = false, EdgeInsets? expandedInsets, ButtonStyle? style, bool showSelectedIcon = true, Widget? selectedIcon, Axis direction = Axis.horizontal}): Creates a const SegmentedButton.
const

Properties

direction → Axis: The orientation of the button's segments.
final
emptySelectionAllowed → bool: Determines if having no selected segments is allowed.
final
expandedInsets → EdgeInsets?: Determines the segmented button's size and padding based on expandedInsets.
final
hashCode → int: The hash code for this object.
no setterinherited
key → Key?: Controls how one widget replaces another widget in the tree.
finalinherited
multiSelectionEnabled → bool: Determines if multiple segments can be selected at one time.
final
onSelectionChanged → void Function(Set<T>)?: The function that is called when the selection changes.
final
runtimeType → Type: A representation of the runtime type of the object.
no setterinherited
segments → List<ButtonSegment<T>>: Descriptions of the segments in the button.
final
selected → Set<T>: The set of ButtonSegment.values that indicate which segments are selected.
final
selectedIcon → Widget?: An icon that is used to indicate a segment is selected.
final
showSelectedIcon → bool: Determines if the selectedIcon (usually an icon using Icons.check) is displayed on the selected segments.
final
style → ButtonStyle?: Customizes this button's appearance.
final

Methods

createElement() → StatefulElement: Creates a StatefulElement to manage this widget's location in the tree.
inherited
createState() → State<SegmentedButton<T>>: 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({Color? foregroundColor, Color? backgroundColor, Color? selectedForegroundColor, Color? selectedBackgroundColor, Color? disabledForegroundColor, Color? disabledBackgroundColor, Color? shadowColor, Color? surfaceTintColor, Color? iconColor, double? iconSize, Color? disabledIconColor, Color? overlayColor, double? elevation, TextStyle? textStyle, EdgeInsetsGeometry? padding, Size? minimumSize, Size? fixedSize, Size? maximumSize, BorderSide? side, OutlinedBorder? shape, MouseCursor? enabledMouseCursor, MouseCursor? disabledMouseCursor, VisualDensity? visualDensity, MaterialTapTargetSize? tapTargetSize, Duration? animationDuration, bool? enableFeedback, AlignmentGeometry? alignment, InteractiveInkFeatureFactory? splashFactory}) → ButtonStyle: A static convenience method that constructs a segmented button ButtonStyle given simple values.