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.
To create a local project with this code sample, run:
flutter create --sample=material.SegmentedButton.1 mysample
To create a local project with this code sample, run:
flutter create --sample=material.SegmentedButton.2 mysample
See also:
- Material Design spec: m3.material.io/components/segmented-buttons/overview
- ButtonStyle, which can be used in the style field to configure the appearance of the button and its segments.
- ToggleButtons, a similar widget that was built for Material 2. SegmentedButton should be considered as a replacement for ToggleButtons.
- Radio, an alternative way to present the user with a mutually exclusive set of options.
- FilterChip, ChoiceChip, which can be used when you need to show more than five options.
- Inheritance
-
- Object
- DiagnosticableTree
- Widget
- StatefulWidget
- SegmentedButton
Constructors
-
SegmentedButton({Key? key, required List<
ButtonSegment< segments, required Set<T> >T> selected, void onSelectionChanged(Set<T> )?, bool multiSelectionEnabled = false, bool emptySelectionAllowed = false, EdgeInsets? expandedInsets, ButtonStyle? style, bool showSelectedIcon = true, Widget? selectedIcon}) -
Creates a const SegmentedButton.
const
Properties
- 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}) → 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? 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.