syncrow-app/lib/features/shared_widgets/custom_switch.dart

import 'package:flutter/material.dart';
import 'package:syncrow_app/utils/resource_manager/color_manager.dart';

class CustomSwitch extends StatefulWidget {
  // final bool value;
  // final ValueChanged<bool> onChanged;

  const CustomSwitch({
    super.key,
    // required this.value,
    // required this.onChanged,
  });

  @override
  _CustomSwitchState createState() => _CustomSwitchState();
}

class _CustomSwitchState extends State<CustomSwitch>
    with SingleTickerProviderStateMixin {
  Animation? _circleAnimation;
  AnimationController? _animationController;

  bool value = false;

  void onChange(bool customValue){
    value = customValue ;
  }

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

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _animationController!,
      builder: (context, child) {
        return GestureDetector(
          onTap: () {
            setState(() {
              _animationController!.isCompleted
                  ? _animationController!.reverse()
                  : _animationController!.forward();
              value == false
                  ? onChange(true)
                  : onChange(false);
            });
          },
          child: Container(
            width: 45.0,
            height: 28.0,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(24.0),
              color: _circleAnimation!.value == Alignment.centerLeft
                  ? Colors.grey
                  : ColorsManager.primaryColor,
            ),
            child: Padding(
              padding: const EdgeInsets.all(2.0),
              child: Container(
                alignment: value
                        ? Alignment.centerRight
                        : Alignment.centerLeft,
                child: Container(
                  width: 20.0,
                  height: 20.0,
                  decoration: const BoxDecoration(
                      shape: BoxShape.circle, color: Colors.white),
                ),
              ),
            ),
          ),
        );
      },
    );
  }
}