Merge pull request #20 from WDI-Ideas/jayeshjain25

settings screen ui
2024-06-06 11:06:13 +05:30
parent dfbe426010 d8daf3bf90
commit 524d48edf4
24 changed files with 322 additions and 25 deletions
--- a/android/gradle.properties
+++ b/android/gradle.properties
@@ -1,3 +1,4 @@
 org.gradle.jvmargs=-Xmx4G
 android.useAndroidX=true
 android.enableJetifier=true
+extra-gen-snapshot-options=--obfuscate
--- a/assets/images/settings_screen/svg/contact_icon.svg
+++ b/assets/images/settings_screen/svg/contact_icon.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.69201 13.3909C7.04725 13.3909 6.52344 12.8671 6.52344 12.2223C6.52344 11.5795 7.04725 11.0557 7.69201 11.0557C8.33677 11.0557 8.86058 11.5795 8.86058 12.2223C8.86058 12.8671 8.33677 13.3909 7.69201 13.3909ZM12.2349 13.3909C11.5901 13.3909 11.0663 12.8671 11.0663 12.2223C11.0663 11.5795 11.5901 11.0557 12.2349 11.0557C12.8796 11.0557 13.4034 11.5795 13.4034 12.2223C13.4034 12.8671 12.8796 13.3909 12.2349 13.3909ZM15.6092 12.2223C15.6092 12.8671 16.1331 13.3909 16.7778 13.3909C17.4226 13.3909 17.9464 12.8671 17.9464 12.2223C17.9464 11.5795 17.4226 11.0557 16.7778 11.0557C16.1331 11.0557 15.6092 11.5795 15.6092 12.2223Z" fill="#363636"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M12.02 2C6.21 2 2 6.74612 2 12.015C2 13.6975 2.49 15.4291 3.35 17.0115C3.51 17.2729 3.53 17.6024 3.42 17.9139L2.75 20.1572C2.6 20.698 3.06 21.0976 3.57 20.9374L5.59 20.3375C6.14 20.1572 6.57 20.3866 7.08 20.698C8.54 21.5583 10.36 22 12 22C16.96 22 22 18.1642 22 11.985C22 6.65598 17.7 2 12.02 2Z" stroke="#363636" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/assets/images/settings_screen/svg/faq_icon.svg
+++ b/assets/images/settings_screen/svg/faq_icon.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.381 9.3C9.59259 8.6985 10.0102 8.1913 10.56 7.86822C11.1097 7.54514 11.756 7.42704 12.3845 7.53484C13.0129 7.64264 13.5829 7.96937 13.9936 8.45718C14.4042 8.94498 14.6289 9.56237 14.628 10.2C14.628 12 11.928 12.9 11.928 12.9M12 16.5H12.009M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" stroke="#363636" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/assets/images/settings_screen/svg/language_icon.svg
+++ b/assets/images/settings_screen/svg/language_icon.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3M12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3M12 21C14.5 18.8182 15.75 15.8182 15.75 12C15.75 8.18182 14.5 5.18182 12 3M12 21C9.5 18.8182 8.25 15.8182 8.25 12C8.25 8.18182 9.5 5.18182 12 3M3.75 9H20.25M3.75 15H20.25" stroke="#363636" stroke-width="1.2" stroke-linecap="round"/>
+</svg>
--- a/assets/images/settings_screen/svg/privacy_icon.svg
+++ b/assets/images/settings_screen/svg/privacy_icon.svg
@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.7122 16.2236H8.49219" stroke="#363636" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15.7122 12.0371H8.49219" stroke="#363636" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M11.2472 7.86035H8.49219" stroke="#363636" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.908 2.75C15.908 2.75 8.231 2.754 8.219 2.754C5.459 2.771 3.75 4.587 3.75 7.357V16.553C3.75 19.337 5.472 21.16 8.256 21.16C8.256 21.16 15.932 21.157 15.945 21.157C18.705 21.14 20.415 19.323 20.415 16.553V7.357C20.415 4.573 18.692 2.75 15.908 2.75Z" stroke="#363636" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/assets/images/settings_screen/svg/reset_password_icon.svg
+++ b/assets/images/settings_screen/svg/reset_password_icon.svg
@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.334 2.75H7.665C4.644 2.75 2.75 4.889 2.75 7.916V16.084C2.75 19.111 4.635 21.25 7.665 21.25H16.333C19.364 21.25 21.25 19.111 21.25 16.084V7.916C21.25 4.889 19.364 2.75 16.334 2.75Z" stroke="#363636" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.6952 12.0004C10.6952 13.0224 9.86619 13.8524 8.84319 13.8524C7.82119 13.8524 6.99219 13.0224 6.99219 12.0004C6.99219 10.9784 7.82119 10.1484 8.84319 10.1484C9.86619 10.1484 10.6952 10.9784 10.6952 12.0004Z" stroke="#363636" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10.6953 12H17.0133V13.852" stroke="#363636" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14.1797 13.851V11.999" stroke="#363636" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/assets/images/settings_screen/svg/reset_pin_icon.svg
+++ b/assets/images/settings_screen/svg/reset_pin_icon.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.4267 5.56204C15.8097 3.78004 14.1167 2.50004 12.1247 2.50004C9.61169 2.49004 7.56569 4.51804 7.55469 7.03104V7.05104V9.19804" stroke="#363636" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.933 21H8.292C6.198 21 4.5 19.302 4.5 17.207V12.919C4.5 10.824 6.198 9.12598 8.292 9.12598H15.933C18.027 9.12598 19.725 10.824 19.725 12.919V17.207C19.725 19.302 18.027 21 15.933 21Z" stroke="#363636" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M12.1094 13.9531V16.1751" stroke="#363636" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/assets/images/settings_screen/svg/upgrade_icon.svg
+++ b/assets/images/settings_screen/svg/upgrade_icon.svg
@@ -0,0 +1,10 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="4" y="4" width="24" height="24" rx="12" fill="url(#paint0_linear_1_11144)"/>
+<path d="M21.5 13.9732C21.5 14.3923 21.1585 14.7321 20.7373 14.7321C20.7326 14.7321 20.7286 14.7297 20.7239 14.7297L19.7606 20.0023C19.7077 20.2894 19.456 20.5 19.1604 20.5H12.8567C12.562 20.5 12.3091 20.2902 12.2565 20.0016L11.2934 14.7302C11.2886 14.7302 11.2846 14.7321 11.2627 14.7321C10.8415 14.7321 10.5 14.3923 10.5 13.9732C10.5 13.5541 10.8587 13.2143 11.2627 13.2143C11.6667 13.2143 12.0254 13.5541 12.0254 13.9732C12.0254 14.1439 11.9583 14.2937 11.8626 14.4204L13.5716 15.7808C13.875 16.0223 14.3248 15.9239 14.4985 15.5782L15.5968 13.3924C15.3813 13.2587 15.2287 13.031 15.2287 12.7589C15.2287 12.3398 15.5872 12 16.0086 12C16.43 12 16.7541 12.3398 16.7541 12.7589C16.7541 13.031 16.6023 13.2587 16.3861 13.3926L17.4844 15.5783C17.6581 15.924 18.1081 16.0223 18.4113 15.781L20.1203 14.4206C20.0413 14.2939 19.9746 14.1269 19.9746 13.9732C19.9746 13.5539 20.3159 13.2143 20.7373 13.2143C21.1587 13.2143 21.5 13.5539 21.5 13.9732Z" fill="#FFF1E9"/>
+<defs>
+<linearGradient id="paint0_linear_1_11144" x1="8.5" y1="28" x2="28" y2="4" gradientUnits="userSpaceOnUse">
+<stop stop-color="#066123"/>
+<stop offset="1" stop-color="#066123" stop-opacity="0.22"/>
+</linearGradient>
+</defs>
+</svg>
--- a/lib/core/styles/app_color.dart
+++ b/lib/core/styles/app_color.dart
@@ -66,7 +66,10 @@ class AppColor {
  static const Color unselectedItemColor = Color(0xFF676767);

  //Academy Color
-
  static const Color academyCardBgColor = Color(0xFFF8F8F8);
  static const Color academyCardTextColor = Color(0xFFD8D8D8);
+
+  //KYC Card Color
+  static const Color kycCardTextColor = Color(0xFF074A23);
+  static const Color kycCardBgColor = Color(0x7F074A23);
 }
--- a/lib/core/styles/app_images.dart
+++ b/lib/core/styles/app_images.dart
@@ -76,4 +76,18 @@ class AppImages {
  static const String videoIcon = 'assets/images/academy_screen/video.png';
  static const String videoPlayIcon =
      'assets/images/academy_screen/play_arrow.png';
+
+  //Settings
+  static const String upgradeIcon =
+      'assets/images/settings_screen/svg/upgrade_icon.svg';
+  static const String faqIcon =
+      'assets/images/settings_screen/svg/upgrade_icon.svg';
+  static const String languageIcon =
+      'assets/images/settings_screen/svg/upgrade_icon.svg';
+  static const String privacyIcon =
+      'assets/images/settings_screen/svg/upgrade_icon.svg';
+  static const String resetPasswordIcon =
+      'assets/images/settings_screen/svg/upgrade_icon.svg';
+  static const String resetPinIcon =
+      'assets/images/settings_screen/svg/upgrade_icon.svg';
 }
--- a/lib/core/styles/app_text.dart
+++ b/lib/core/styles/app_text.dart
@@ -130,4 +130,24 @@ class AppText {

  //Wallet
  static const String walletTitle = "Wallet balance";
+
+  //Settings
+  static const String settingsText = "Settings";
+  static const String experiencedInvestorText = "Experienced investor?";
+  static const String upgradeText =
+      "Upgrade your investor status today in a few simple steps to allows investments higher than SAR 200,000";
+  static const String generalText = "General";
+  static const String notificationsText = "Notifications";
+  static const String languageText = "Language";
+  static const String englishText = "English";
+  static const String privacySettingsText = "Privacy Settings";
+  static const String biometricText = "Biometric ID";
+  static const String resetPasswordText = "Reset Password";
+  static const String resetPinCodeText = "Reset PIN-code";
+  static const String contactAdminText = "Contact Admin";
+  static const String privacyPolicyText = "Privacy Policy";
+  static const String termsAndConditionText = "Terms & Conditions";
+  static const String faqText = "FAQ";
+  static const String logoutText = "Log Out";
+  static const String deleteAccountText = "Delete account";
 }
--- a/lib/features/MainScreens/Academy/presentation/widgets/academy_detail_section.dart
+++ b/lib/features/MainScreens/Academy/presentation/widgets/academy_detail_section.dart
@@ -1,7 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_screenutil/flutter_screenutil.dart';
 import 'package:gap/gap.dart';
-import 'package:google_fonts/google_fonts.dart';
 import 'package:tanami_app/core/styles/app_color.dart';
 import 'package:tanami_app/core/styles/app_images.dart';
 import 'package:tanami_app/core/styles/app_text.dart';
--- a/lib/features/MainScreens/Settings/presentation/pages/settingsScreen.dart
+++ b/lib/features/MainScreens/Settings/presentation/pages/settingsScreen.dart
@@ -1,17 +0,0 @@
-import 'package:flutter/material.dart';
-
-class SettingsScreen extends StatefulWidget {
-  const SettingsScreen({super.key});
-
-  @override
-  State<SettingsScreen> createState() => _SettingsScreenState();
-}
-
-class _SettingsScreenState extends State<SettingsScreen> {
-  @override
-  Widget build(BuildContext context) {
-    return const Scaffold(
-      body: Text('Settings'),
-    );
-  }
-}
--- a/lib/features/MainScreens/Settings/presentation/pages/settings_layout.dart
+++ b/lib/features/MainScreens/Settings/presentation/pages/settings_layout.dart
@@ -0,0 +1,25 @@
+import 'package:flutter/material.dart';
+import 'package:gap/gap.dart';
+
+import '../widgets/kyc_card.dart';
+
+class SettingsLayout extends StatelessWidget {
+  const SettingsLayout({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      body: Padding(
+        padding: const EdgeInsets.symmetric(
+          horizontal: 16,
+        ),
+        child: ListView(
+          children: [
+            const Gap(10),
+            kycCard(),
+          ],
+        ),
+      ),
+    );
+  }
+}
--- a/lib/features/MainScreens/Settings/presentation/pages/settings_screen.dart
+++ b/lib/features/MainScreens/Settings/presentation/pages/settings_screen.dart
@@ -0,0 +1,33 @@
+import 'package:flutter/material.dart';
+import 'package:tanami_app/features/MainScreens/Settings/presentation/pages/settings_layout.dart';
+
+import '../../../../../core/styles/app_color.dart';
+import '../../../../../core/styles/app_text.dart';
+import '../../../../../shared/components/text_widget.dart';
+
+class SettingsScreen extends StatefulWidget {
+  const SettingsScreen({super.key});
+
+  @override
+  State<SettingsScreen> createState() => _SettingsScreenState();
+}
+
+class _SettingsScreenState extends State<SettingsScreen> {
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+        appBar: AppBar(
+          //   backgroundColor: Colors.white,
+          elevation: 0,
+          scrolledUnderElevation: 0,
+          automaticallyImplyLeading: false,
+          centerTitle: true,
+          title: TextWidget().text22W700(
+            AppText.settingsText,
+            clr: AppColor.charcoalColor,
+          ),
+          titleSpacing: 16,
+        ),
+        body: const SettingsLayout());
+  }
+}
--- a/lib/features/MainScreens/Settings/presentation/widgets/kyc_card.dart
+++ b/lib/features/MainScreens/Settings/presentation/widgets/kyc_card.dart
@@ -0,0 +1,65 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+import 'package:gap/gap.dart';
+import 'package:tanami_app/core/styles/app_color.dart';
+import 'package:tanami_app/core/styles/app_images.dart';
+import 'package:tanami_app/core/styles/app_text.dart';
+import 'package:tanami_app/shared/components/text_widget.dart';
+
+Widget kycCard() {
+  return Container(
+    padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
+    decoration: ShapeDecoration(
+      color: const Color(0xFFD9EDE0),
+      shape: RoundedRectangleBorder(
+        side: const BorderSide(
+          width: 1,
+          color: AppColor.kycCardBgColor,
+        ),
+        borderRadius: BorderRadius.circular(22),
+      ),
+      shadows: const [
+        BoxShadow(
+          color: Color(0x33066123),
+          blurRadius: 8,
+          offset: Offset(-3, -3),
+          spreadRadius: 0,
+        ),
+        BoxShadow(
+          color: Color(0x26122F1A),
+          blurRadius: 8,
+          offset: Offset(3, 3),
+          spreadRadius: 0,
+        )
+      ],
+    ),
+    child: Row(
+      children: [
+        SvgPicture.asset(
+          AppImages.upgradeIcon,
+        ),
+        const Gap(8),
+        Expanded(
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              TextWidget().text14W600(
+                AppText.experiencedInvestorText,
+                clr: AppColor.kycCardTextColor,
+              ),
+              TextWidget().text11W500(
+                AppText.upgradeText,
+                clr: AppColor.kycCardTextColor,
+              ),
+            ],
+          ),
+        ),
+        const Gap(8),
+        const Icon(
+          Icons.arrow_forward_ios_rounded,
+          color: AppColor.kycCardTextColor,
+        )
+      ],
+    ),
+  );
+}
--- a/lib/features/MainScreens/Wallet/presentation/pages/walletScreen.dart
+++ b/lib/features/MainScreens/Wallet/presentation/pages/walletScreen.dart
@@ -1,5 +1,4 @@
 import 'package:flutter/material.dart';
-import 'package:flutter/widgets.dart';
 import 'package:flutter_screenutil/flutter_screenutil.dart';
 import 'package:google_fonts/google_fonts.dart';
 import 'package:tanami_app/core/styles/app_text.dart';
@@ -14,7 +13,6 @@ class WalletScreen extends StatefulWidget {
 class _WalletScreenState extends State<WalletScreen> {
  @override
  Widget build(BuildContext context) {
-
    return Scaffold(
      backgroundColor: Colors.white,
      body: CustomScrollView(
@@ -117,7 +115,7 @@ class _WalletScreenState extends State<WalletScreen> {
                                ),
                              ],
                            ),
-                            VerticalDivider(
+                            const VerticalDivider(
                              color: Colors.black,
                              width: 20.0,
                            ),
@@ -157,7 +155,6 @@ class _WalletScreenState extends State<WalletScreen> {
          ),
        ],
      ),
-
    );
  }
 }
--- a/lib/features/MainScreens/main_screen.dart
+++ b/lib/features/MainScreens/main_screen.dart
@@ -3,7 +3,7 @@ import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:tanami_app/features/MainScreens/Academy/presentation/pages/academy_screen.dart';
 import 'package:tanami_app/features/MainScreens/Invest/presentation/pages/investScreen.dart';
 import 'package:tanami_app/features/MainScreens/Portfolio/presentation/pages/portfolio_screen.dart';
-import 'package:tanami_app/features/MainScreens/Settings/presentation/pages/settingsScreen.dart';
+import 'package:tanami_app/features/MainScreens/Settings/presentation/pages/settings_Screen.dart';
 import 'package:tanami_app/features/MainScreens/Wallet/presentation/pages/walletScreen.dart';
 import 'package:tanami_app/shared/components/common_bottom_navigation.dart';

--- a/lib/shared/components/bloc/toggle/toggle_bloc.dart
+++ b/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();
+      }
+    }
+  }
+}
--- a/lib/shared/components/bloc/toggle/toggle_event.dart
+++ b/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 => [];
+}
--- a/lib/shared/components/bloc/toggle/toggle_state.dart
+++ b/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 {}
--- a/lib/shared/components/text_widget.dart
+++ b/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,
--- a/lib/shared/components/toggle_widget.dart
+++ b/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()),
+                  ),
+                ),
+              ],
+            ),
+          ),
+        );
+      },
+    );
+  }
+}
--- a/pubspec.yaml
+++ b/pubspec.yaml
@@ -109,3 +109,6 @@ flutter:
    - assets/images/biometric_screen/svg/
    - assets/images/dialog/
    - assets/images/dialog/svg/
+    - assets/images/settings_screen/
+    - assets/images/settings_screen/png/
+    - assets/images/settings_screen/svg/