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: 300));
    _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 ? onChange(false) : onChange(true);
            });
          },
          child: Container(
            width: 45.0,
            height: 28.0,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(24.0),
              color: _circleAnimation!.value == Alignment.centerLeft
                  ? Color(0xFFD9D9D9)
                  : ColorsManager.primaryColor,
            ),
            child: Center(
              child: Container(
                width: 40.0,
                height: 23.0,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(24.0),
                  color: Colors.white,
                ),
                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: BoxDecoration(
                        shape: BoxShape.circle,
                        color: _circleAnimation!.value == Alignment.centerLeft
                            ? Color(0xFFD9D9D9)
                            : ColorsManager.primaryColor,
                      ),
                    ),
                  ),
                ),
              ),
            ),
          ),
        );
      },
    );
  }
}