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.

Base

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

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.

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:

Final Output

#flutter #programming #mobile-apps #developer