add persisted theme toggle to RequestEditorPaneHome

This commit is contained in:
Matthew Krohn
2023-04-04 15:49:59 -07:00
parent 90823513ac
commit a7154aadfb
4 changed files with 84 additions and 2 deletions

View File

@ -1,5 +1,6 @@
import 'dart:io';
import 'dart:math' as math;
import 'package:apidash/providers/providers.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:window_size/window_size.dart' as window_size;
@ -39,11 +40,12 @@ void main() async {
);
}
class App extends StatelessWidget {
class App extends ConsumerWidget {
const App({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
Widget build(BuildContext context, WidgetRef ref) {
final theme = ref.watch(themeStateProvider);
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData(
@ -52,6 +54,17 @@ class App extends StatelessWidget {
useMaterial3: true,
brightness: Brightness.light,
),
darkTheme: ThemeData(
fontFamily: GoogleFonts.openSans().fontFamily,
colorSchemeSeed: Colors.blue,
useMaterial3: true,
brightness: Brightness.dark,
),
themeMode: theme != null
? theme
? ThemeMode.light
: ThemeMode.dark
: ThemeMode.system,
home: const HomePage(),
);
}

View File

@ -12,6 +12,26 @@ final codePaneVisibleStateProvider = StateProvider<bool>((ref) => false);
final saveDataStateProvider = StateProvider<bool>((ref) => false);
final clearDataStateProvider = StateProvider<bool>((ref) => false);
final StateNotifierProvider<ThemeStateNotifier, bool?> themeStateProvider =
StateNotifierProvider((ref) => ThemeStateNotifier());
class ThemeStateNotifier extends StateNotifier<bool?> {
ThemeStateNotifier() : super(false) {
loadData();
}
final hiveHandler = HiveHandler();
Future<void> toggle() async {
state = !state!;
await hiveHandler.setTheme(state);
}
void loadData() {
state = hiveHandler.getTheme() ?? false;
}
}
final StateNotifierProvider<CollectionStateNotifier, List<RequestModel>?>
collectionStateNotifierProvider =
StateNotifierProvider((ref) => CollectionStateNotifier());

View File

@ -48,6 +48,7 @@ class RequestEditorPaneHome extends ConsumerWidget {
@override
Widget build(BuildContext context, WidgetRef ref) {
final theme = ref.watch(themeStateProvider);
return Padding(
padding: const EdgeInsets.symmetric(
vertical: 40,
@ -155,6 +156,48 @@ class RequestEditorPaneHome extends ConsumerWidget {
),
],
),
kVSpacer10,
Row(
children: [
Text.rich(
TextSpan(
children: [
const TextSpan(
text: "Choose your theme now: ",
),
WidgetSpan(
alignment: PlaceholderAlignment.middle,
child: ElevatedButton(
onPressed: () async => await ref
.read(themeStateProvider.notifier)
.toggle(),
child: Row(
children: [
theme != null
? theme
? const Icon(Icons.dark_mode)
: const Icon(Icons.light_mode)
: const Icon(Icons.light_mode),
kHSpacer10,
Text.rich(
TextSpan(
text: theme != null
? theme
? "Dark"
: "Light"
: "Light",
),
),
],
),
),
),
],
),
style: Theme.of(context).textTheme.titleMedium,
),
],
),
kVSpacer20,
kVSpacer10,
Row(

View File

@ -6,6 +6,9 @@ const String kDataBox = "data";
// sequence of ids
const String kDataBoxIds = "ids";
// dark theme boolean
const String kDataBoxTheme = "theme";
Future<void> openBoxes() async {
await Hive.initFlutter();
await Hive.openBox(kDataBox);
@ -18,6 +21,9 @@ class HiveHandler {
dataBox = Hive.box(kDataBox);
}
dynamic getTheme() => dataBox.get(kDataBoxTheme);
Future<void> setTheme(bool? theme) => dataBox.put(kDataBoxTheme, theme);
dynamic getIds() => dataBox.get(kDataBoxIds);
Future<void> setIds(List<String>? ids) => dataBox.put(kDataBoxIds, ids);