Small details that build taste in Flutter.

curated by Kamran BekirovKamran Bekirov

Put meaningful icons on the switch thumb

Be creative with your Material Switches. Put icons on the thumb, like these three from bunpod.app:

It takes a WidgetStateProperty. selected is the on state, any covers everything else:

Switch(
  value: isDark,
  thumbIcon: const WidgetStateProperty<Icon?>.fromMap({
    WidgetState.selected: Icon(
      Icons.dark_mode_rounded,
    ),
    WidgetState.any: Icon(
      Icons.light_mode_rounded,
    ),
  }),
  onChanged: ...,
)

Each switch in the video picks its icons differently:

Dark theme: moon when on, sun when off. Both sides are a real state, so both get a real icon.

Download over Wi-Fi only: Wi-Fi when on, X when off. Off just means it's not enabled, so a plain X. Don't leave the off side without an icon: the thumb gets smaller and bigger as you toggle.

New episode alerts: check and X. The tile already has a bell icon, the thumb doesn't repeat it.

One note on the title: it must be true when the switch is on. "Dark theme", not "Theme". Screen readers read only the title, never the icons.

Be creative: the map accepts any WidgetState (pressed, dragged, hovered, focused, scrolledUnder, disabled, error), and you can combine them with &:

WidgetState.disabled & WidgetState.selected: Icon(...)

A note on iOS: iOS apps rarely use thumb icons, so think twice before adding them to Switch.adaptive or CupertinoSwitch.

Kamran Bekirov
Kamran Bekirov

Want this level of care in your Flutter apps?

Work With Me