sliding_segmented_control #

A segmented control whose selection is marked by a pill that slides between segments, rather than by a highlighted button — plus SegmentedBody, which pairs the control with a body that cross-fades as the pill moves.

The selection can be tapped, dragged — press the pill and slide it, as on iOS — or moved with the arrow keys. Segments share the width equally, take their own width, or scroll.

Material comes from the material_ui package rather than from package:flutter/material.dart, so your app has to be on material_ui too — its ThemeData and ColorScheme are not the framework's. Beyond that the control asks nothing of you: no assets, no localisations, no other pub.flutter-io.cn dependency. Colours, shapes and metrics come from a ThemeExtension you register, and with none registered it derives a palette from the ambient ColorScheme.

Still on framework Material? Stay on 0.1.1.

The control in three styles — default, with icons, and with a solid indicator:

Segments sized to their content, a scrollable track, and a badge:

And a SegmentedBody, the control above the body of the selected segment:

Install #

flutter pub add sliding_segmented_control

Or add it to pubspec.yaml yourself — it is a runtime dependency:

dependencies:
  material_ui: ">=1.0.0 <3.0.0"
  sliding_segmented_control: ^1.1.0

then:

flutter pub get

Use #

The control on its own, driven by you:

SlidingSegmentedControl(
  segments: const [
    Segment(label: 'Buy'),
    Segment(label: 'Sell'),
    Segment(label: 'History'),
  ],
  selectedIndex: _index,
  onSegmentChanged: (i) => setState(() => _index = i),
)

Or the control with its body, keeping the selection for you:

SegmentedBody(
  pages: [
    SegmentPage.of(label: 'Open', child: const OpenPositions()),
    SegmentPage.of(label: 'Closed', child: const ClosedPositions()),
  ],
)

Only the selected page is built, so the others cost nothing until they are picked. Pass selectedIndex and onSegmentChanged to drive it yourself instead.

SlidingSegmentedControl #

A Segment is a label, an optional icon, and enabled — a disabled segment is dimmed and ignores input. It also takes a semanticLabel and a tooltip, and three ways to draw something other than plain text:

Segment(label: 'Inbox', icon: Icons.inbox_outlined, badge: const Text('12'))

Segment and SegmentPage compare by value and have a copyWith.

Sizing #

sizing decides how the segments share the control's width.

The pill takes the width of whichever segment it is under, so it grows and shrinks as it slides between segments of different widths.

Dragging #

Press the pill and slide it: the pill follows the pointer, ticks out haptic feedback as it crosses into each segment, and commits to the segment nearest where it is let go. Set enableDrag: false to leave dragging alone, or enableFeedback: false for the haptics only. A press that starts anywhere but on the pill is an ordinary tap.

SegmentedBody #

Leave bodyExpanded false inside a scroll view, where the height is unbounded.

Body transitions #

SegmentedBody(
  bodyTransition: SegmentedBodyTransition.slide,
  pages: [...],
)

slide is direction-aware: picking a later segment brings the body in from the end side, picking an earlier one brings it from the start side, and both are mirrored under TextDirection.rtl. It reads the direction from the selection itself, so it works the same whether the widget keeps the selection or you do.

For anything else, pass a transitionBuilder — it takes precedence over bodyTransition:

SegmentedBody(
  transitionBuilder: (child, animation) =>
      RotationTransition(turns: animation, child: child),
  pages: [...],
)

Theming #

Register a SegmentedControlTheme so every control in the app is styled in one place, and follows your light and dark themes:

MaterialApp(
  theme: ThemeData(
    extensions: [
      SegmentedControlTheme(
        trackColor: scheme.surfaceContainerLow,
        borderColor: scheme.outlineVariant,
        indicatorColor: scheme.primary.withValues(alpha: 0.14),
        selectedLabelColor: scheme.primary,
        unselectedLabelColor: scheme.onSurfaceVariant,
      ),
    ],
  ),
);

Every field is optional beyond those five, and the widget's own parameters win over whatever the extension says.

With no extension registered, SegmentedControlTheme.of falls back to SegmentedControlTheme.fromScheme(Theme.of(context).colorScheme) — a tinted indicator on a surface track — so the control is usable with no setup.

copyWith and lerp are implemented, so the control animates across a theme change like any other ThemeExtension.

Corners #

trackRadius and indicatorRadius take any BorderRadiusGeometry — one radius for all four corners, a different radius per corner, elliptical corners, or BorderRadiusDirectional, which the shape resolves against the ambient text direction:

SlidingSegmentedControl(
  trackRadius: const BorderRadius.only(
    topLeft: Radius.circular(22),
    bottomRight: Radius.elliptical(12, 6),
  ),
  indicatorRadius: BorderRadius.circular(18),
  // …
)

By default the corners are drawn as a superellipse — the smoothed, iOS-style squircle — through Flutter's own RoundedSuperellipseBorder, which the engine rasterises directly. Set smoothCorners: false on the theme for plain circular corners.

For corner geometry this package does not ship, pass a whole ShapeBorder as trackShape / indicatorShape, on the theme or per instance. That is the seam for a StadiumBorder, your own ShapeBorder, or a squircle from a package such as figma_squircle — the shape comes from you, so the dependency stays in your app rather than in this one:

SlidingSegmentedControl(
  trackShape: SmoothRectangleBorder(
    borderRadius: SmoothBorderRadius(cornerRadius: 8, cornerSmoothing: 1),
  ),
  // …
)

Right-to-left #

Segments are laid out along the text direction, so under TextDirection.rtl the first segment is on the right and the pill slides leftwards. Drags and the arrow keys mirror with it. Nothing to configure.

Keyboard and accessibility #

The control is a single tab stop, like a radio group: Tab reaches the selected segment and the arrow keys move from there.

The focused segment is drawn with focusColor behind it and a ring in focusOutlineColor, and the segment under the pointer takes hoverColor.

Each segment is exposed as a button carrying its selected and enabled state, with a tap action, labelled by Segment.semanticLabel or its label. Note the default height of 44 is under the 48 dp minimum tap target — raise it on the theme where that matters.

Testing against it #

The sliding indicator carries SlidingSegmentedControl.indicatorKey and each segment carries SlidingSegmentedControl.segmentKey(index), so host tests can find and measure them:

final pill = tester.getRect(
  find.byKey(SlidingSegmentedControl.indicatorKey),
);
final second = tester.getRect(
  find.byKey(SlidingSegmentedControl.segmentKey(1)),
);

// Drag the pill to the last segment.
await tester.drag(
  find.byKey(SlidingSegmentedControl.segmentKey(0)),
  const Offset(200, 0),
);

Example #

A runnable demo of every style, including the RTL toggle, is in example/:

cd example && flutter run

The images in this README are rendered from the real widgets, so they can be regenerated whenever the control changes:

cd example && flutter test --update-goldens test/screenshots_test.dart && flutter test tool/record_tab_gif.dart

Licence #

MIT — see LICENSE.