Flutter UI Essentials — Switch

Maneesha Erandi
4 min readApr 3, 2024

We use Switches to toggle the selection of an item on or off.

Material Switch is the best way

  • to control single items of a list
  • to change settings of an app (turn on or off wifi, bluetooth)
  • to immediately activate or deactivate something
  • to make on/off state clearly visible

What’s new with Material 3?

Accessibility: Visual presentation is more accessible

Color: New color mappings meet non-text-contrast requirements in addition to compatibility with dynamic color

Icons: Ability to have an optional icon within the switch handle

Layout: Track is taller and wider

Placement — often arranged in stacked layouts

Behavior — slides to the other side of the track after an interaction

Label text — always should pair with inline label text describing what will be controlled by the switch

Flutter Switch

Constructors

This will create a Material Design Switch. The switch will not maintain any state alone. When the switch status changes, the widget will call the onChanged callback.

  • By default, track and…

--

--