In this article, we are going to create a minimal custom Switch Widget in Flutter. Flutter provides a built-in “Switch Widget” which looks simple. We are going to create our own “Flat Style” switch widget.

The switch has two parts:

  • The base
  • The knob

We will start writing code for the base and the knob separately.


The base is nothing but the background of the switch which is in a rounded rectangle shape.

Image for post

Widget for Switch Base

  1. **AnimatedContainer **is used instead of container because we are going to add animations when the switch is turned ON and OFF.
  2. **widget.value **holds either **true **or **false **which represents whether a switch is **ON **or **OFF **respectively

The Knob

The knob is the **circular **button inside the base that we use to toggle the state of the switch.

Image for post

Widget for Switch Knob

  1. **AnimatedAlign **is used to animate the movement of the switch when the user clicks it.

The final output looks as follows:

Image for post

Final Output

#flutter #programming #mobile-apps #developer

How to Create a Custom Switch in Flutter
36.05 GEEK