Settings Screen DONE

lib/main.dart

@@ -45,6 +45,7 @@ import 'package:test_sa/controllers/providers/api/status_drop_down/service_reqes
 import 'package:test_sa/new_views/app_style/app_themes.dart';
 import 'package:test_sa/new_views/pages/land_page/land_page.dart';
 import 'package:test_sa/new_views/pages/login_page.dart';
+import 'package:test_sa/new_views/pages/settings_page.dart';
 import 'package:test_sa/new_views/pages/splash_page.dart';
 import 'package:test_sa/providers/department_provider.dart';
 import 'package:test_sa/providers/gas_request_providers/cylinder_size_provider.dart';
@@ -208,7 +209,7 @@ class MyApp extends StatelessWidget {
             RequestGasRefill.id: (_) => const RequestGasRefill(),
             CreateServiceRequestPage.id: (_) => const CreateServiceRequestPage(),
             SingleHospitalPicker.id: (_) => SingleHospitalPicker(),
-            SingleDevicePicker.id: (_) => SingleDevicePicker(),
+            SingleDevicePicker.id: (_) => const SingleDevicePicker(),
             SingleDepartmentPicker.id: (_) => SingleDepartmentPicker(),
             NotificationsPage.id: (_) => NotificationsPage(),
             FutureRequestServiceDetails.id: (_) => FutureRequestServiceDetails(),
@@ -225,6 +226,7 @@ class MyApp extends StatelessWidget {
             AssetFilterScreen.id: (_) => const AssetFilterScreen(),
             WorkOrderDetailsPage.id: (_) => const WorkOrderDetailsPage(),
             UpdateServiceRequestPage.id: (_) => const UpdateServiceRequestPage(),
+            SettingsPage.id: (_) => const SettingsPage(),
           },
         ),
       ),

lib/new_views/common_widgets/app_drawer.dart

@@ -12,8 +12,8 @@ import 'package:test_sa/views/pages/user/notifications/notifications_page.dart';
 
 import '../../controllers/providers/api/user_provider.dart';
 import '../../controllers/providers/settings/setting_provider.dart';
-import '../../models/enums/translation_keys.dart';
+import '../../views/widgets/dialogs/dialog.dart';
-import 'app_filled_button.dart';
+import '../pages/settings_page.dart';
 
 class AppDrawer extends StatelessWidget {
   const AppDrawer({Key key}) : super(key: key);
@@ -61,7 +61,7 @@ class AppDrawer extends StatelessWidget {
           18.height,
           1.divider,
           ListView(
-            padding: EdgeInsets.only(top: 24),
+            padding: const EdgeInsets.only(top: 24),
             children: [
               drawerItem("drawer_notification", "Notification").onPress(() => Navigator.of(context).pushNamed(NotificationsPage.id)),
               18.height,
@@ -69,47 +69,19 @@ class AppDrawer extends StatelessWidget {
               18.height,
               drawerItem("rate_us", "Rate Us"),
               18.height,
-              drawerItem("setting", "Settings"),
+              drawerItem("setting", "Settings").onPress(() => Navigator.of(context).pushNamed(SettingsPage.id)),
               18.height,
               drawerItem("report", "Report a bug"),
               18.height,
               drawerItem("whats_new", "What's New"),
             ],
           ).expanded,
-          Row(
+          drawerItem("logout", "Logout", color: AppColor.red50).onPress(() async {
-            mainAxisAlignment: MainAxisAlignment.spaceBetween,
+            bool result = await showDialog(
-            children: [
+              context: context,
-              const Text("Dark"),
+              builder: (_) => AAlertDialog(title: context.translation.signOut, content: context.translation.logoutAlert),
-              Switch.adaptive(
+            );
-                value: context.isDark,
+            if (result) {
-                onChanged: (value) {
-                  settingProvider.setDarkTheme(value);
-                },
-              ),
-            ],
-          ),
-          Row(
-            mainAxisAlignment: MainAxisAlignment.spaceBetween,
-            children: [
-              const Text("Arabic"),
-              Switch.adaptive(
-                value: settingProvider.language == "ar",
-                onChanged: (value) {
-                  settingProvider.setLanguage(value ? "ar" : "en");
-                },
-              ),
-            ],
-          ),
-          drawerItem("logout", "Logout", color: AppColor.red50).onPress(() {
-            /// TODO [zaid] : show dialog before logout
-            // bool result = await showDialog(
-            //   context: context,
-            //   builder: (_) => const AAlertDialog(
-            //     title: "_subtitle.signOut",
-            //     content: "_subtitle.signOutAlert",
-            //   ),
-            // );
-            if (true) {
               settingProvider.resetSettings();
               userProvider.reset();
               Navigator.of(context).pop();

lib/new_views/pages/settings_page.dart

@@ -0,0 +1,94 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_advanced_switch/flutter_advanced_switch.dart';
+import 'package:provider/provider.dart';
+import 'package:test_sa/controllers/providers/settings/setting_provider.dart';
+import 'package:test_sa/extensions/int_extensions.dart';
+import 'package:test_sa/extensions/text_extensions.dart';
+import 'package:test_sa/extensions/widget_extensions.dart';
+import 'package:test_sa/new_views/app_style/app_color.dart';
+
+import '../common_widgets/default_app_bar.dart';
+
+class SettingsPage extends StatefulWidget {
+  static const id = "/settings_page";
+  const SettingsPage({Key key}) : super(key: key);
+
+  @override
+  State<SettingsPage> createState() => _SettingsPageState();
+}
+
+class _SettingsPageState extends State<SettingsPage> {
+  ValueNotifier<bool> langController, themeController;
+  SettingProvider _settingProvider;
+
+  @override
+  void dispose() {
+    super.dispose();
+    langController.dispose();
+    themeController.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    _settingProvider ??= Provider.of<SettingProvider>(context, listen: false);
+    langController ??= ValueNotifier<bool>(_settingProvider.language == "ar")
+      ..addListener(() async {
+        /// TODO : uncomment the below lines to support the another language
+        // await _settingProvider.setLanguage(_settingProvider.language == "ar" ? "en" : "ar");
+        // langController.value = _settingProvider.language == "ar";
+      });
+    themeController ??= ValueNotifier<bool>(_settingProvider.theme == "light")
+      ..addListener(() async {
+        await _settingProvider.setDarkTheme(_settingProvider.theme == "light");
+        themeController.value = _settingProvider.theme == "light";
+      });
+    return Scaffold(
+      appBar: const DefaultAppBar(title: "Settings"),
+      body: Card(
+        child: Column(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            Row(
+              mainAxisAlignment: MainAxisAlignment.spaceBetween,
+              children: [
+                "Arabic".heading5(context),
+                AdvancedSwitch(
+                  controller: langController,
+                  activeColor: AppColor.green50.withOpacity(0.5),
+                  inactiveColor: AppColor.neutral10,
+                  thumb: CircleAvatar(backgroundColor: _settingProvider.language == "ar" ? AppColor.green50 : AppColor.neutral20),
+                  borderRadius: const BorderRadius.all(Radius.circular(30)),
+                  width: 42.toScreenWidth,
+                  height: 24.toScreenHeight,
+
+                  /// TODO : remove the below attribute to enable the switch
+                  enabled: false,
+                  disabledOpacity: 1,
+                ),
+              ],
+            ),
+            16.height,
+            const Divider().defaultStyle(context),
+            16.height,
+            Row(
+              mainAxisAlignment: MainAxisAlignment.spaceBetween,
+              children: [
+                "Light Theme".heading5(context),
+                AdvancedSwitch(
+                  controller: themeController,
+                  activeColor: AppColor.green50.withOpacity(0.5),
+                  inactiveColor: AppColor.neutral10,
+                  thumb: CircleAvatar(backgroundColor: _settingProvider.theme == "light" ? AppColor.green50 : AppColor.neutral20),
+                  borderRadius: const BorderRadius.all(Radius.circular(30)),
+                  width: 42.toScreenWidth,
+                  height: 24.toScreenHeight,
+                  disabledOpacity: 1,
+                ),
+              ],
+            ),
+          ],
+        ).paddingAll(16),
+      ).paddingAll(16),
+    );
+  }
+}

pubspec.lock

@@ -342,6 +342,14 @@ packages:
     description: flutter
     source: sdk
     version: "0.0.0"
+  flutter_advanced_switch:
+    dependency: "direct main"
+    description:
+      name: flutter_advanced_switch
+      sha256: b16c92c648a35c95cf9cfd0d6cf3391765f1c9cc5786418999d0058ed51f3d6b
+      url: "https://pub.dev"
+    source: hosted
+    version: "3.0.1"
   flutter_blurhash:
     dependency: transitive
     description:

pubspec.yaml

@@ -71,6 +71,7 @@ dependencies:
   dotted_border: ^2.1.0
   lottie: ^2.3.0
   shimmer: ^2.0.0
+  flutter_advanced_switch: ^3.0.1
 
 dev_dependencies:
   flutter_test: