multi_state_switch

A Material 3 switch with any number of states: off / on, off / middle / on, or as many steps as you like.

MultiStateSwitch demo

Features

With 2 states it looks exactly like a Material 3 Switch (same size, colours and outline); add more states as needed
Built on a discrete Slider: dragging, snapping, tap-to-jump, keyboard input and screen reader support come for free
Track colour and thumb size animate from "off" to "on" as the position goes up
Picks up your ColorScheme, or takes custom track and thumb colours
No CustomPainter widget, just a small slider track shape

Getting started

flutter pub add multi_state_switch

or add it to your pubspec.yaml manually:

dependencies:
  multi_state_switch: ^1.1.0

Usage

import 'package:multi_state_switch/multi_state_switch.dart';

int mode = 0; // 0 = off, 1 = middle, 2 = on

MultiStateSwitch(
  states: 3,
  value: mode,
  onChanged: (v) => setState(() => mode = v),
)

value goes from 0 ("off") to states - 1 ("on"). Pass onChanged: null to disable the switch.

Options

parameter	default
`states`	required	number of positions, at least 2
`value`	required	selected position, `0 … states - 1`
`onChanged`	required	called with the new position; `null` disables the switch
`inactiveTrackColor`	`colorScheme.surfaceContainerHighest`	track colour when off
`activeTrackColor`	`colorScheme.primary`	track colour when on; positions in between blend
`inactiveThumbColor`	`colorScheme.outline`	thumb colour when off
`activeThumbColor`	`colorScheme.onPrimary`	thumb colour in every other position
`inactiveTrackOutlineColor`	`colorScheme.outline`	outline around the track when off
`stepWidth`	`20`	distance between two positions; the track is `32 + (states - 1) * stepWidth` wide, plus 4px touch padding per side, 48px tall
`animationDuration`	`150ms`	how fast colour and thumb size follow a change
`semanticFormatterCallback`	position number	what screen readers announce for a position
`focusNode`, `autofocus`		as on `Slider`

Haptics

The switch stays silent so you can choose; add a tick in onChanged:

onChanged: (v) {
  HapticFeedback.selectionClick();
  setState(() => mode = v);
},

Example

See example/ for a demo app with 2, 3 and 5 state switches, a light / system / dark theme picker built from one, custom colours and a disabled switch.

Additional information

The demo GIF is rendered by flutter test tool/record_demo_gif.dart.

Contributions (PRs) are welcome.