Toggle

A Toggle is a control that lets users switch between two opposing states, such as on/off or enabled/disabled.

Use Toggles for settings or actions that take immediate effect and don’t require confirmation, ideal for preferences, system options, or feature flags.

Common alternative names:
Switch

---

Variants

Active

Toggle in the active/on state.

Preview

Code

Toggle(
  value: true,
  onChanged: (value) {
    // Handle state change
  },
)

---

Inactive

Toggle in the inactive/off state.

Preview

Code

Toggle(
  value: false,
  onChanged: (value) {
    // Handle state change
  },
)

---

Disabled

Toggle that cannot be interacted with.

Preview

Code

Toggle(
  value: true,
  readOnly: true,
)

---

Large Size

Toggle with increased size for better visibility.

Preview

Code

Toggle(
  value: true,
  size: 15,
  onChanged: (value) {
    // Handle state change
  },
)

---

Properties

Property	Type	Description
value	bool	Required. Current state of the toggle (true for active, false for inactive).
onChanged	void Function(bool)?	Callback when toggle state changes. If null, toggle is disabled.
readOnly	bool	Whether toggle is read-only and cannot be interacted with. Default: false.
size	double	Size factor for scaling the toggle from base size of 15. Default: 10.
thumbColor	Color?	Color of the toggle thumb (circular moving part). Default: Colors.white.
activeTrackColor	Color?	Color of the track when toggle is active. Uses theme accent color if not provided.
inactiveTrackColor	Color?	Color of the track when toggle is inactive. Uses default Cupertino color if not provided.