sliding_segmented_control 1.1.0 copy "sliding_segmented_control: ^1.1.0" to clipboard
sliding_segmented_control: ^1.1.0 copied to clipboard

Published 17 days ago
SDKFlutter
PlatformAndroidiOSLinuxmacOSwebWindows
→

Metadata

A themeable segmented control whose selection is marked by a pill sliding between segments, with an optional body that cross-fades underneath it.

More...

Changelog #

1.1.0 #

  • The selection can be dragged: press the pill and slide it, as on iOS. 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. A press that starts anywhere but on the pill is still an ordinary tap. enableDrag and enableFeedback turn each half of that off.
  • Keyboard support. The control is one tab stop, like a radio group: Tab reaches the selected segment, the arrow keys move the selection from there — stepping over disabled segments, stopping at the ends, and mirroring under RTL — Home and End jump to either end, and Space or Enter selects the focused segment. autofocus gives the control focus on first build.
  • The focused segment is drawn with focusColor behind it and a ring in focusOutlineColor, and the segment under the pointer takes hoverColor. All three are on the theme, alongside focusOutlineWidth.
  • Sizing modes, through sizing. SegmentSizing.equal is the old behaviour and stays the default; intrinsic sizes each segment to its own content and shrink-wraps the control, squeezing the segments proportionally rather than overflowing when they do not fit; scrollable puts content-sized segments in a horizontal scroll view that keeps the selection in view. The pill takes the width of whichever segment it is under.
  • SegmentedControlTheme.segmentPadding insets a segment's content, and is what gives a content-sized segment its width beyond the label.
  • Segment gains iconWidget for an icon this package cannot express as an IconData, badge for a count or status chip after the label, and child to replace the icon and label outright while label stays on as the screen-reader text. Segment and SegmentPage both gain copyWith, and SegmentPage now compares by value.
  • Every segment carries SlidingSegmentedControl.segmentKey(index), so host tests can find and measure one.
  • The floors come down to Dart 3.12.0 and Flutter 3.44.0, which is as low as material_ui itself goes — nothing here needs anything newer than RoundedSuperellipseBorder, in the framework since 3.32. The example moves down with the package.
  • The material_ui constraint floats across major versions, >=1.0.0 <3.0.0, rather than being capped at 1.x.
  • The layout is a render object rather than a Stack of aligned children, which is what lets the pill size itself to segments of different widths. Nothing public changed with it: indicatorKey and indicatorAlignment are where they were, and the widget is drop-in from 1.0.0.

1.0.0 #

  • Breaking. Material comes from the material_ui package, not from package:flutter/material.dart. Every import 'package:flutter/material.dart' is now import 'package:material_ui/material_ui.dart'.

    The types this package exposes — ThemeExtension, ThemeData, ColorScheme, TextTheme — are material_ui's, and those are distinct from the framework's classes of the same name. A host registering SegmentedControlTheme as a theme extension, or reading it through SegmentedControlTheme.of, has to be on material_ui too. dart fix --apply --code=migrate_design_widgets does the import rewrite for you.

    Hosts still on framework Material stay on 0.1.1.

  • The SDK floor moves to Dart 3.13.0 and Flutter 3.47.0.

  • The example's Flutter floor, left behind at 3.27.0, moves up with the package.

0.1.1 #

  • Dropped the figma_squircle dependency: the package now needs nothing but Flutter. Corners are drawn by RoundedSuperellipseBorder, in the framework since Flutter 3.32, which the engine rasterises directly.
  • Corner radii are settable from the call site. trackRadius and indicatorRadius take any BorderRadiusGeometry — one radius, a different radius per corner, elliptical corners, or the directional BorderRadiusDirectional — on the theme or per instance.
  • trackShape / indicatorShape take a whole ShapeBorder, also per instance, so a host can bring corner geometry this package does not ship — a figma_squircle squircle, for instance — and keep that dependency in its own pubspec.
  • cornerSmoothing, a figma_squircle notion, gives way to the smoothCorners flag.
  • The Flutter floor moves to 3.32.0 for RoundedSuperellipseBorder.

0.1.0 #

  • First release.
  • SlidingSegmentedControl — a segmented control whose selection is marked by a pill sliding between equally-sized segments, with per-segment icons, tooltips and disabled states.
  • SegmentedBody — the control above the body of the selected segment, which cross-fades on change. Works controlled or uncontrolled, and builds only the selected page.
  • SegmentedBodyTransition — fade (the default), slide and scale for the body change, with transitionBuilder still there for anything else. slide follows the direction the selection moved in, and mirrors under RTL.
  • SegmentedControlTheme, a ThemeExtension covering colours, text styles, shapes and metrics, with copyWith and lerp. With none registered, the palette is derived from the ambient ColorScheme.
  • Right-to-left is handled by positioning the indicator with AlignmentDirectional.
  • Segments are exposed to screen readers as buttons carrying their selected and enabled state.
  • README screenshots are generated from the real widgets by example/test/screenshots_test.dart.

← Metadata

1
likes
160
points
265
downloads
screenshot

Documentation

API reference

Publisher

unverified uploader

Weekly Downloads

Metadata

A themeable segmented control whose selection is marked by a pill sliding between segments, with an optional body that cross-fades underneath it.

Homepage
Repository (GitHub)
View/report issues

Topics

#segmented-control #tabs #toggle #widget

License

MIT (license)

Dependencies

flutter, material_ui

More

Packages that depend on sliding_segmented_control

Back