Theme change functionality

lib/app/bindings/initial_binding.dart

@@ -1,6 +1,5 @@
 import 'package:get/get.dart';
 
-import 'local_source_bindings.dart';
 import 'remote_source_bindings.dart';
 import 'repository_bindings.dart';
 
@@ -9,6 +8,5 @@ class InitialBinding implements Bindings {
   void dependencies() {
     RepositoryBindings().dependencies();
     RemoteSourceBindings().dependencies();
-    LocalSourceBindings().dependencies();
   }
 }

lib/app/core/base/base_view.dart

@@ -6,7 +6,6 @@ import 'package:logger/logger.dart';
 
 import '/app/core/base/base_controller.dart';
 import '/app/core/model/page_state.dart';
-import '/app/core/values/app_colors.dart';
 import '/app/core/widget/loading.dart';
 import '/flavors/build_config.dart';
 
@@ -18,6 +17,8 @@ abstract class BaseView<Controller extends BaseController>
 
   final Logger logger = BuildConfig.instance.config.logger;
 
+  ThemeData get appTheme => Theme.of(Get.context!);
+
   Widget body(BuildContext context);
 
   PreferredSizeWidget? appBar(BuildContext context);
@@ -83,11 +84,11 @@ abstract class BaseView<Controller extends BaseController>
   }
 
   Color pageBackgroundColor() {
-    return AppColors.pageBackground;
+    return appTheme.canvasColor;
   }
 
   Color statusBarColor() {
-    return AppColors.pageBackground;
+    return appTheme.canvasColor;
   }
 
   Widget? floatingActionButton() {

lib/app/core/utils/theme_service.dart

@@ -0,0 +1,31 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_getx_template/app/data/local/preference/preference_manager.dart';
+import 'package:get/get.dart' as getx;
+
+class ThemeService {
+  static const themeModeKey = 'isDarkMode';
+  static const lightThemeText = 'Light Theme';
+  static const darkThemeText = 'Dark Theme';
+
+  final PreferenceManager _preferenceManager =
+      getx.Get.find(tag: (PreferenceManager).toString());
+
+  // Get themeMode info from local storage and return current ThemeMode
+  Future<ThemeMode> get themeMode async =>
+      await _loadThemeFromSharedPref() ? ThemeMode.dark : ThemeMode.light;
+
+  // Load themeMode from local storage
+  Future<bool> _loadThemeFromSharedPref() async {
+    return await _preferenceManager.getBool(themeModeKey);
+  }
+
+  // Load isDarkMode status from local storage
+  Future<bool> getCurrentThemeMode() async {
+    return await _preferenceManager.getBool(themeModeKey);
+  }
+
+  // change isDarkMode status in local storage
+  changeThemeMode(bool isDarkMode) {
+    _preferenceManager.setBool(themeModeKey, isDarkMode);
+  }
+}

lib/app/core/values/app_colors.dart

@@ -17,6 +17,10 @@ abstract class AppColors {
   static const Color errorColor = Color(0xFFAB0B0B);
   static const Color colorDark = Color(0xFF323232);
 
+  // Dark theme colors
+  static const Color canvasColor = Color(0xFFFAFAFA);
+  static const Color canvasColorDark = Color(0xFF212121);
+
   static const Color buttonBgColor = colorPrimary;
   static const Color disabledButtonBgColor = Color(0xFFBFBFC0);
   static const Color defaultRippleColor = Color(0x0338686A);

lib/app/core/values/app_themes.dart

@@ -0,0 +1,45 @@
+import 'package:flutter/material.dart';
+
+import 'app_colors.dart';
+
+class AppThemes {
+  // light theme configurations
+  static ThemeData get lightTheme {
+    return ThemeData(
+      primarySwatch: AppColors.colorPrimarySwatch,
+      visualDensity: VisualDensity.adaptivePlatformDensity,
+      brightness: Brightness.light,
+      primaryColor: AppColors.colorPrimary,
+      canvasColor: AppColors.canvasColor,
+      cardColor: AppColors.canvasColor,
+      textTheme: const TextTheme(
+        button: TextStyle(
+          color: Colors.white,
+          fontSize: 20.0,
+          fontWeight: FontWeight.bold,
+        ),
+      ),
+      fontFamily: 'Roboto',
+    );
+  }
+
+  // dark theme configurations
+  static ThemeData get darkTheme {
+    return ThemeData(
+      primarySwatch: AppColors.colorPrimarySwatch,
+      visualDensity: VisualDensity.adaptivePlatformDensity,
+      brightness: Brightness.dark,
+      primaryColor: AppColors.colorPrimary,
+      canvasColor: AppColors.canvasColorDark,
+      cardColor: AppColors.canvasColorDark,
+      textTheme: const TextTheme(
+        button: TextStyle(
+          color: Colors.white,
+          fontSize: 20.0,
+          fontWeight: FontWeight.bold,
+        ),
+      ),
+      fontFamily: 'Roboto',
+    );
+  }
+}

lib/app/modules/settings/controllers/settings_controller.dart

@@ -1,9 +1,28 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_getx_template/app/core/utils/theme_service.dart';
 import 'package:get/get.dart';
 
+import '../../../my_app/controllers/my_app_controller.dart';
 import '/app/core/base/base_controller.dart';
 
 class SettingsController extends BaseController {
-  final count = 0.obs;
+  final ThemeService themeService = ThemeService();
+  final Rx<bool> isCurrentThemeDarkMode = Rx<bool>(false);
+  final Rx<String> currentThemeText = Rx<String>("");
+  final MyAppController _myAppController = Get.find();
 
-  void increment() => count.value++;
+  changeTheme() async {
+    late ThemeMode themeMode;
+    themeMode = isCurrentThemeDarkMode.value ? ThemeMode.light : ThemeMode.dark;
+    _myAppController.setCurrentThemeMode(themeMode);
+    await themeService.changeThemeMode(!isCurrentThemeDarkMode.value);
+    await getCurrentThemeMode();
+  }
+
+  getCurrentThemeMode() async {
+    isCurrentThemeDarkMode.value = await themeService.getCurrentThemeMode();
+    currentThemeText.value = isCurrentThemeDarkMode.value
+        ? ThemeService.lightThemeText
+        : ThemeService.darkThemeText;
+  }
 }

lib/app/modules/settings/views/settings_view.dart

@@ -1,11 +1,16 @@
 import 'package:flutter/material.dart';
+import 'package:get/get.dart';
 
 import '/app/core/base/base_view.dart';
-import '/app/core/values/text_styles.dart';
 import '/app/core/widget/custom_app_bar.dart';
 import '/app/modules/settings/controllers/settings_controller.dart';
 
+// ignore: must_be_immutable
 class SettingsView extends BaseView<SettingsController> {
+  SettingsView() {
+    controller.getCurrentThemeMode();
+  }
+
   @override
   PreferredSizeWidget? appBar(BuildContext context) {
     return CustomAppBar(
@@ -15,11 +20,25 @@ class SettingsView extends BaseView<SettingsController> {
 
   @override
   Widget body(BuildContext context) {
-    return const Center(
-      child: Text(
-        'SettingsView is working',
-        style: titleStyle,
+    return Scaffold(
+      body: Padding(
+        padding: const EdgeInsets.all(10),
+        child: Row(
+          mainAxisAlignment: MainAxisAlignment.spaceBetween,
+          children: [
+            Obx(() => Text(controller.currentThemeText.value)),
+            Obx(() => Switch(
+                  value: controller.isCurrentThemeDarkMode.value,
+                  onChanged: (value) =>
+                      _changeThemeMode(), //not using the value
+                )),
+          ],
+        ),
       ),
     );
   }
+
+  _changeThemeMode() {
+    controller.changeTheme();
+  }
 }

lib/app/my_app/bindings/my_app_bindings.dart

@@ -0,0 +1,11 @@
+import '../controllers/my_app_controller.dart';
+import 'package:get/get.dart';
+
+class MyAppBindings extends Bindings {
+  @override
+  void dependencies() {
+    Get.lazyPut<MyAppController>(
+      () => MyAppController(),
+    );
+  }
+}

lib/app/my_app/controllers/my_app_controller.dart

@@ -0,0 +1,20 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_getx_template/app/core/utils/theme_service.dart';
+import 'package:get/get.dart';
+
+class MyAppController extends GetxController {
+  ThemeService themeService = ThemeService();
+  var currentThemeMode = Rx<ThemeMode>(ThemeMode.light);
+
+  MyAppController() {
+    getCurrentThemeMode();
+  }
+
+  getCurrentThemeMode() async {
+    currentThemeMode.value = await themeService.themeMode;
+  }
+
+  setCurrentThemeMode(ThemeMode themeMode) {
+    currentThemeMode.value = themeMode;
+  }
+}

lib/app/my_app/views/my_app.dart

@@ -0,0 +1,57 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_gen/gen_l10n/app_localizations.dart';
+import 'package:flutter_getx_template/app/core/values/app_themes.dart';
+import 'package:flutter_getx_template/app/my_app/controllers/my_app_controller.dart';
+import 'package:get/get.dart';
+
+import '/app/bindings/initial_binding.dart';
+import '/app/routes/app_pages.dart';
+import '/flavors/build_config.dart';
+import '/flavors/env_config.dart';
+import '../../bindings/local_source_bindings.dart';
+import '../bindings/my_app_bindings.dart';
+
+class MyApp extends StatefulWidget {
+  const MyApp({Key? key}) : super(key: key);
+
+  @override
+  _MyAppState createState() => _MyAppState();
+}
+
+class _MyAppState extends State<MyApp> {
+  final EnvConfig _envConfig = BuildConfig.instance.config;
+  late MyAppController controller;
+
+  @override
+  void initState() {
+    // initialize [LocalResourceBinding] here because
+    // we need to access SharedPreferences in [MyAppController]
+    LocalSourceBindings().dependencies();
+    MyAppBindings().dependencies();
+    controller = Get.find();
+    super.initState();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Obx(() => GetMaterialApp(
+          title: _envConfig.appName,
+          initialRoute: AppPages.INITIAL,
+          initialBinding: InitialBinding(),
+          getPages: AppPages.routes,
+          localizationsDelegates: AppLocalizations.localizationsDelegates,
+          supportedLocales: _getSupportedLocal(),
+          theme: AppThemes.lightTheme,
+          darkTheme: AppThemes.darkTheme,
+          themeMode: controller.currentThemeMode.value,
+          debugShowCheckedModeBanner: false,
+        ));
+  }
+
+  List<Locale> _getSupportedLocal() {
+    return [
+      const Locale('en', ''),
+      const Locale('bn', ''),
+    ];
+  }
+}

lib/main_dev.dart

@@ -1,6 +1,6 @@
 import 'package:flutter/material.dart';
 
-import '/app/my_app.dart';
+import 'app/my_app/views/my_app.dart';
 import '/flavors/build_config.dart';
 import '/flavors/env_config.dart';
 import '/flavors/environment.dart';

lib/main_prod.dart

@@ -1,6 +1,6 @@
 import 'package:flutter/material.dart';
 
-import '/app/my_app.dart';
+import 'app/my_app/views/my_app.dart';
 import '/flavors/build_config.dart';
 import '/flavors/env_config.dart';
 import '/flavors/environment.dart';