In this article, we are going to create a minimal custom Switch Widget in Flutter. Flutter provides a built-inSwitch Widget which looks simple. We are going to create our ownFlat 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 arounded rectangle shape.
AnimatedContainervis used instead of the container because we are going to add animations when the switch is turned ON and OFF.
widget.value holds eithertrue orfalse which represents whether a switch isON orOFF respectively
The Knob
The knob is thecircular button inside the base that we use to toggle the state of the switch.
- AnimatedAlign is used to animate the movement of the switch when the user clicks it.
The final output looks as follows:
Take a look at the below Gist to view the full code with functionality:
Wrapping Up
Well, that’s everything! It’s a short and sweet tutorial but I hope you found it helpful.
Top comments(0)
For further actions, you may consider blocking this person and/orreporting abuse
