initialized Devices Page

lib/features/shared_widgets/custom_switch.dart

@@ -0,0 +1,77 @@
+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;
+
+  @override
+  void initState() {
+    super.initState();
+    _animationController = AnimationController(
+        vsync: this, duration: const Duration(milliseconds: 100));
+    _circleAnimation = AlignmentTween(
+            begin: widget.value ? Alignment.centerRight : Alignment.centerLeft,
+            end: widget.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: () {
+            _animationController!.isCompleted
+                ? _animationController!.reverse()
+                : _animationController!.forward();
+            widget.value == false
+                ? widget.onChanged(true)
+                : widget.onChanged(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: widget.value
+                    ? ((Directionality.of(context) == TextDirection.rtl)
+                        ? Alignment.centerRight
+                        : Alignment.centerLeft)
+                    : ((Directionality.of(context) == TextDirection.rtl)
+                        ? Alignment.centerLeft
+                        : Alignment.centerRight),
+                child: Container(
+                  width: 20.0,
+                  height: 20.0,
+                  decoration: const BoxDecoration(
+                      shape: BoxShape.circle, color: Colors.white),
+                ),
+              ),
+            ),
+          ),
+        );
+      },
+    );
+  }
+}