Merge pull request #13 from dhafinrayhan/settings-in-profile-screen

Move logout button

Author: dhafinrayhan

lib/features/profile/screens/profile.dart

@@ -1,6 +1,8 @@
 import 'package:flutter/material.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 
+import '../../../services/theme_mode.dart';
+import '../../../utils/theme_mode_helper.dart';
 import '../../auth/providers/auth_state.dart';
 import '../providers/profile.dart';
 
@@ -10,34 +12,89 @@ class ProfileScreen extends ConsumerWidget {
   @override
   Widget build(BuildContext context, WidgetRef ref) {
     final profile = ref.watch(currentProfileProvider);
+    final themeMode = ref.watch(currentThemeModeProvider);
+
     final profileRecords = [
       (label: 'Name', text: profile?.fullName),
       (label: 'Username', text: profile?.username),
       (label: 'Email', text: profile?.email),
     ];
 
+    void showThemeModeDialog() {
+      showDialog(
+        context: context,
+        builder: (_) => const _ThemeModeDialog(),
+      );
+    }
+
+    void logout() {
+      ref.read(currentAuthStateProvider.notifier).logout();
+    }
+
     return Scaffold(
       appBar: AppBar(
         title: const Text('Profile'),
-        actions: [
-          IconButton(
-            onPressed: () =>
-                ref.read(currentAuthStateProvider.notifier).logout(),
-            icon: const Icon(Icons.logout),
-            tooltip: 'Logout',
+      ),
+      body: ListView(
+        children: [
+          for (final record in profileRecords)
+            ListTile(
+              title: Text(record.label),
+              subtitle: Text(record.text ?? ''),
+            ),
+          const Divider(),
+          ListTile(
+            leading: const Icon(Icons.brightness_6),
+            title: const Text('Theme mode'),
+            trailing: Text(themeMode.label),
+            onTap: showThemeModeDialog,
+          ),
+          const Divider(),
+          ListTile(
+            leading: const Icon(Icons.logout),
+            title: const Text('Logout'),
+            onTap: logout,
           ),
         ],
       ),
-      body: ListView.builder(
-        itemCount: profileRecords.length,
-        itemBuilder: (_, index) {
-          final record = profileRecords[index];
-          return ListTile(
-            title: Text(record.label),
-            subtitle: Text(record.text ?? ''),
-          );
-        },
-      ),
+    );
+  }
+}
+
+class _ThemeModeDialog extends ConsumerWidget {
+  const _ThemeModeDialog();
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    void setThemeMode(ThemeMode themeMode) {
+      ref.read(currentThemeModeProvider.notifier).set(themeMode);
+      Navigator.of(context).pop();
+    }
+
+    return SimpleDialog(
+      clipBehavior: Clip.antiAlias,
+      children: [
+        for (final themeMode in ThemeMode.values)
+          _ThemeModeDialogOption(
+            value: themeMode,
+            onTap: () => setThemeMode(themeMode),
+          )
+      ],
+    );
+  }
+}
+
+class _ThemeModeDialogOption extends StatelessWidget {
+  const _ThemeModeDialogOption({required this.value, required this.onTap});
+
+  final ThemeMode value;
+  final GestureTapCallback? onTap;
+
+  @override
+  Widget build(BuildContext context) {
+    return ListTile(
+      onTap: onTap,
+      title: Text(value.label),
     );
   }
 }

lib/main.dart

@@ -6,6 +6,7 @@ import 'package:hooks_riverpod/hooks_riverpod.dart';
 
 import 'features/profile/models/profile.dart';
 import 'services/router.dart';
+import 'services/theme_mode.dart';
 
 Future<void> main() async {
   HttpOverrides.global = _HttpOverrides();
@@ -22,6 +23,7 @@ Future<void> main() async {
     await [
       Hive.openBox<Profile>('profile'),
       Hive.openBox<String>('token'),
+      Hive.openBox<String>('settings'),
     ].wait;
   });
 
@@ -37,9 +39,11 @@ class DummyMartApp extends ConsumerWidget {
   @override
   Widget build(BuildContext context, WidgetRef ref) {
     final router = ref.watch(routerProvider);
+    final themeMode = ref.watch(currentThemeModeProvider);
 
     return MaterialApp.router(
       title: 'DummyMart',
+      themeMode: themeMode,
       theme: ThemeData(
         useMaterial3: true,
         colorSchemeSeed: Colors.blue,

lib/services/theme_mode.dart

@@ -0,0 +1,28 @@
+import 'package:flutter/material.dart';
+import 'package:hive_flutter/hive_flutter.dart';
+import 'package:riverpod_annotation/riverpod_annotation.dart';
+
+part 'theme_mode.g.dart';
+
+@Riverpod(keepAlive: true)
+class CurrentThemeMode extends _$CurrentThemeMode {
+  @override
+  ThemeMode build() {
+    // Load the saved theme mode setting from Hive box.
+    final themeModeName = Hive.box<String>('settings').get('themeMode');
+
+    // Return [ThemeMode] based on the saved setting, or [ThemeMode.system]
+    // if there's no saved setting yet.
+    return ThemeMode.values.singleWhere(
+      (themeMode) => themeMode.name == themeModeName,
+      orElse: () => ThemeMode.system,
+    );
+  }
+
+  void set(ThemeMode themeMode) {
+    state = themeMode;
+
+    // Save the new theme mode to Hive box.
+    Hive.box<String>('settings').put('themeMode', themeMode.name);
+  }
+}

lib/utils/theme_mode_helper.dart

@@ -0,0 +1,9 @@
+import 'package:flutter/material.dart';
+
+extension ThemeModeHelper on ThemeMode {
+  String get label => switch (this) {
+        ThemeMode.system => 'System',
+        ThemeMode.light => 'Light',
+        ThemeMode.dark => 'Dark',
+      };
+}