This is the source code of the Flutter Challenges series post: https://fun4code.com/10flutterchallanges-part2/

main.dart

import 'package:flutter/material.dart';
import 'package:samples/switch_button/switch_button.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(
        body: SafeArea(
          child: SwitchButton(),
        ),
      ),
    );
  }
}

switch_button.dart

import 'package:flutter/material.dart';

class SwitchButton extends StatefulWidget {
  const SwitchButton({Key? key}) : super(key: key);

  @override
  State<SwitchButton> createState() => _SwitchButtonState();
}

class _SwitchButtonState extends State<SwitchButton>
    with SingleTickerProviderStateMixin {
  late final AnimationController _animationController;
  late final Animation _circleAnimation;
  bool value = false;

  @override
  void initState() {
    super.initState();
    _animationController = AnimationController(
      duration: const Duration(milliseconds: 60),
      vsync: this,
    );
    _circleAnimation =
        AlignmentTween(begin: Alignment.centerLeft, end: Alignment.centerRight)
            .animate(
      CurvedAnimation(parent: _animationController, curve: Curves.linear),
    );

    if (value) {
      _animationController.forward();
    } else {
      _animationController.reverse();
    }
  }

  @override
  void didUpdateWidget(covariant SwitchButton oldWidget) {
    super.didUpdateWidget(oldWidget);

    if (value) {
      _animationController.forward();
    } else {
      _animationController.reverse();
    }
  }

  @override
  void dispose() {
    super.dispose();
    _animationController.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _animationController,
      builder: (_, __) {
        return GestureDetector(
          onTap: () {
            if (value) {
              value = false;
              _animationController.reverse();
            } else {
              value = true;
              _animationController.forward();
            }
          },
          child: Container(
            width: 65.0,
            height: 40.0,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(20.0),
              color: _circleAnimation.value == Alignment.centerLeft
                  ? Colors.black
                  : Colors.greenAccent,
            ),
            child: Padding(
              padding: const EdgeInsets.all(4.0),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                  _circleAnimation.value == Alignment.centerRight
                      ? const Padding(
                          padding: EdgeInsets.only(left: 22.0, right: 4.0),
                        )
                      : Container(),
                  Align(
                    child: Container(
                      width: 28.8,
                      height: 28.8,
                      decoration: BoxDecoration(
                        shape: BoxShape.circle,
                        color: Colors.white,
                        border: Border.all(
                            color: Colors.black.withOpacity(0.04), width: 0.6),
                        boxShadow: <BoxShadow>[
                          BoxShadow(
                            color: Colors.black.withOpacity(0.16),
                            offset: const Offset(0, 1),
                            blurRadius: 1,
                          ),
                        ],
                      ),
                    ),
                  ),
                  _circleAnimation.value == Alignment.centerLeft
                      ? const Padding(
                          padding: EdgeInsets.only(left: 4.0, right: 22.0),
                        )
                      : Container(),
                ],
              ),
            ),
          ),
        );
      },
    );
  }
}