settings screen ui

lib/shared/components/bloc/toggle/toggle_bloc.dart

@@ -0,0 +1,19 @@
+// Bloc
+import 'package:bloc/bloc.dart';
+
+import 'toggle_event.dart';
+import 'toggle_state.dart';
+
+class ToggleBloc extends Bloc<ToggleEvent, ToggleState> {
+  ToggleBloc() : super(ToggleInitial());
+
+  Stream<ToggleState> mapEventToState(ToggleEvent event) async* {
+    if (event is ToggleSwitch) {
+      if (state is ToggleOn) {
+        yield ToggleOff();
+      } else {
+        yield ToggleOn();
+      }
+    }
+  }
+}

lib/shared/components/bloc/toggle/toggle_event.dart

@@ -0,0 +1,9 @@
+// Events
+import 'package:equatable/equatable.dart';
+
+abstract class ToggleEvent extends Equatable {
+  const ToggleEvent();
+
+  @override
+  List<Object> get props => [];
+}

lib/shared/components/bloc/toggle/toggle_state.dart

@@ -0,0 +1,19 @@
+import 'package:equatable/equatable.dart';
+
+import 'toggle_event.dart';
+
+class ToggleSwitch extends ToggleEvent {}
+
+// States
+abstract class ToggleState extends Equatable {
+  const ToggleState();
+
+  @override
+  List<Object> get props => [];
+}
+
+class ToggleInitial extends ToggleState {}
+
+class ToggleOn extends ToggleState {}
+
+class ToggleOff extends ToggleState {}

lib/shared/components/text_widget.dart

@@ -12,7 +12,7 @@ class TextWidget {
             color: clr ?? AppColor.plainWhite));
   }
 
-   Widget text11W500(String text, {Color? clr}) {
+  Widget text11W500(String text, {Color? clr}) {
     return Text(text,
         style: GoogleFonts.dmSans(
             fontSize: 11,
@@ -89,6 +89,21 @@ class TextWidget {
             color: clr ?? AppColor.plainWhite));
   }
 
+  Widget text14W600(
+    String text, {
+    Color? clr,
+    TextDecoration? textDecoration,
+    TextAlign? txtAlign,
+  }) {
+    return Text(text,
+        textAlign: txtAlign ?? TextAlign.center,
+        style: GoogleFonts.dmSans(
+            fontSize: 14,
+            fontWeight: FontWeight.w600,
+            decoration: textDecoration ?? TextDecoration.none,
+            color: clr ?? AppColor.plainWhite));
+  }
+
   Widget text14W700(String text,
       {Color? clr, TextDecoration? textDecoration, TextAlign? txtAlign}) {
     return Text(text,

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()),
+                  ),
+                ),
+              ],
+            ),
+          ),
+        );
+      },
+    );
+  }
+}