settings screen ui

lib/shared/components/toggle_widget.dart

@@ -0,0 +1,55 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+
+import 'bloc/toggle/toggle_bloc.dart';
+import 'bloc/toggle/toggle_state.dart';
+
+class CustomToggle extends StatelessWidget {
+  const CustomToggle({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return BlocBuilder<ToggleBloc, ToggleState>(
+      builder: (context, state) {
+        bool isOn = state is ToggleOn;
+
+        return GestureDetector(
+          onTap: () {
+            context.read<ToggleBloc>().add(ToggleSwitch());
+          },
+          child: AnimatedContainer(
+            duration: const Duration(milliseconds: 200),
+            width: 50.0,
+            height: 30.0,
+            decoration: BoxDecoration(
+              borderRadius: BorderRadius.circular(15.0),
+              color: isOn ? Colors.green : Colors.grey,
+            ),
+            child: Stack(
+              children: [
+                AnimatedPositioned(
+                  duration: const Duration(milliseconds: 200),
+                  curve: Curves.easeIn,
+                  left: isOn ? 20.0 : 0.0,
+                  right: isOn ? 0.0 : 20.0,
+                  child: AnimatedSwitcher(
+                    duration: const Duration(milliseconds: 200),
+                    transitionBuilder:
+                        (Widget child, Animation<double> animation) {
+                      return ScaleTransition(scale: animation, child: child);
+                    },
+                    child: isOn
+                        ? Icon(Icons.check_circle,
+                            color: Colors.white, size: 30.0, key: UniqueKey())
+                        : Icon(Icons.remove_circle_outline,
+                            color: Colors.white, size: 30.0, key: UniqueKey()),
+                  ),
+                ),
+              ],
+            ),
+          ),
+        );
+      },
+    );
+  }
+}