multi_state_switch 1.1.0

A Material 3 switch with any number of states (off / middle / on, ...), built on a discrete Slider so dragging, snapping and semantics come for free.

multi_state_switch

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

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.