Segmented Control

A segmented control is a UI component that allows users to switch between two or more options by tapping segments arranged in a single line. Each segment represents a distinct view, category, or mode.

Segmented controls are best used when users need to make quick, mutually exclusive choices without navigating away from the current context, for example, switching between List and Grid views, or filtering content by categories.

Common alternative names:
Tabs, Segments, Option Switcher, Toggle Group

---

Variants

Two Segments

A simple two-option segmented control.

Preview

Code

SegmentedControl(
  segments: const ['Segment', 'Segment'],
  selectedIndex: selectedIndex,
  onSelectionChanged: (index) {
    setState(() => selectedIndex = index);
  },
)

---

Three Segments

A three-option segmented control for more choices.

Preview

Code

SegmentedControl(
  segments: const ['Segment', 'Segment', 'Segment'],
  selectedIndex: selectedIndex,
  onSelectionChanged: (index) {
    setState(() => selectedIndex = index);
  },
)

---

Four Segments

A four-option segmented control.

Preview

Code

SegmentedControl(
  segments: const [
    'Segment',
    'Segment',
    'Segment',
    'Segment'
  ],
  selectedIndex: selectedIndex,
  onSelectionChanged: (index) {
    setState(() => selectedIndex = index);
  },
)

---

Five Segments

A five-option segmented control for maximum choices.

Preview

Code

SegmentedControl(
  segments: const [
    'Segment',
    'Segment',
    'Segment',
    'Segment',
    'Segment'
  ],
  selectedIndex: selectedIndex,
  onSelectionChanged: (index) {
    setState(() => selectedIndex = index);
  },
)

---

Properties

Property	Type	Description
segments	List	The list of segment data to display.
selectedIndex	int	The index of the currently selected segment.
onSelectionChanged	ValueChanged<int>?	Callback function called when selection changes. Receives the selected index.
height	double	The height of the segmented control.
borderRadius	BorderRadiusGeometry?	The border radius to apply to the control.
backgroundColor	Color?	The background color of the control. Uses theme-appropriate default if null.
selectedColor	Color?	The color of the selected segment. Defaults to white.
unselectedTextColor	Color?	The text color for unselected segments. Uses theme-appropriate default if null.
selectedTextColor	Color?	The text color for the selected segment. Uses theme-appropriate default if null.
padding	EdgeInsetsGeometry	The padding around the entire control.
segmentPadding	EdgeInsetsGeometry?	The padding inside each segment. Optional.