Build an Animated Switch/Toggle in Flutter.

Switches or toggles are used quite often in mobile applications. And making them look good can become complex, if not done correctly.

Let me show you a easy way using which you can build a cool looking animated switch widget in Flutter.

Let’s first implement the base UI. After which we will add animations to it.

Firstly, create a stateful widget in a new file called AnimatedSwitch.dart.
You can type “stful” and press enter to automatically generate a widget if you are using vscode.

After you have done that, return a Container from the build and add some decoration to it using the below code.

import 'package:flutter/material.dart';
class AnimatedSwitch extends StatefulWidget {
  @override
  _AnimatedSwitchState createState() => _AnimatedSwitchState();
}
class _AnimatedSwitchState extends State<AnimatedSwitch> {
@override
  Widget build(BuildContext context) {
    return Container(
      height: 40,
      width: 70,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(30),
        color: Color(0xff989fd5),
        border: Border.all(
        color: Colors.white,
          width: 2
        ),
        boxShadow: [
            BoxShadow(
            color: Colors.grey.shade400,
              spreadRadius: 2,
              blurRadius: 10,
            ),
        ],
      ),
    );
  }
}

You will see the following output.

First build

Now we will add a circle container as a child of main container we just created.
Also give it padding of 2 on both sides.

@override
  Widget build(BuildContext context) {
    return Container(
      ...
      child: Padding(
            padding: EdgeInsets.symmetric(horizontal: 2),
          child: Container(
            width: 30,
            height: 30,
            decoration: BoxDecoration(
            shape: BoxShape.circle,
            color: Colors.white,
            ),
          ),
        ),
    );
  }

After you have implement the code. You will see this result.

Second Build

Okay now that we have our initial design ready, we will start adding the animations.
First we will create two variables,
1. isEnabled
2. animationDuration

You can put these two variables above the build method.

class AnimatedSwitch extends StatefulWidget {
  @override
  _AnimatedSwitchState createState() => _AnimatedSwitchState();
}
class _AnimatedSwitchState extends State<AnimatedSwitch> {
  var isEnabled = false;
  final animationDuration = Duration(milliseconds: 500);
@override
  Widget build(BuildContext context) {
    return Container(
      ...
    );
  }
}

After this we will do three things.
1. Wrap parent Container with GestureDetector
2. Convert parent Container to AnimatedContainer
3. Wrap Padding widget with AnimatedAlign

Here is how we do that.

@override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: (){
 
            },
    child: AnimatedContainer(
      ...
      child: AnimatedAlign(
          child: Padding(
            ...
          ),
    ),
    );
  }
}

Now, in duration property of AnimatedContainer and AnimatedAlign, we will pass our variable animationDuration.

duration: animationDuration,

And in onTap function of GestureDetector, we will toggle isEnabled in setState to change the state of the widget.

return GestureDetector(
      onTap: (){
              setState((){
                isEnabled = !isEnabled;
              });
            },
    ...
    );

Now we have to change the alignment of circular container according to the value of isEnabled variable.
If isEnabled is set to true, alignment will be centerRight otherwise it will be centerLeft.

child: AnimatedAlign(
            duration: animationDuration,
            alignment: isEnabled ? Alignment.centerRight :     Alignment.centerLeft,
          ...
          ),

Now the last thing which is left is to animate color, which we will also change according to the value of isEnabled.

child: AnimatedContainer(
      height: 40,
      width: 70,
      duration: animationDuration,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(30),
        color: isEnabled ? Color(0xff565671) : Color(0xff989fd5),
        border: Border.all(
        color: Colors.white,
          width: 2
        ),
        boxShadow: [
            BoxShadow(
            color: Colors.grey.shade400,
              spreadRadius: 2,
              blurRadius: 10,
            ),
        ],
      ),
      ...
    ),

That’s it, we have successfully built an animated switch.
Have a look at the final output.

Final output

You can change colors and animation duration according to your liking.

Here is the Github link of the full code: https://github.com/jagrut-18/flutter_animated_switch/blob/master/lib/AnimatedSwitch.dart

Thank you for reading until this point. Make sure to leave a comment for any suggestions and 👏 for this story.