Add functional Theme selection, with Provider for state management

frontend_splatournament_manager/devtools_options.yaml

@@ -0,0 +1,3 @@
+description: This file stores settings for Dart & Flutter DevTools.
+documentation: https://docs.flutter.dev/tools/devtools/extensions#configure-extension-enablement-states
+extensions:

frontend_splatournament_manager/lib/main.dart

@@ -1,19 +1,35 @@
 import 'package:flutter/material.dart';
 import 'package:frontend_splatournament_manager/homepage.dart';
 import 'package:frontend_splatournament_manager/settings_page.dart';
+import 'package:frontend_splatournament_manager/state_provider.dart';
 import 'package:go_router/go_router.dart';
+import 'package:provider/provider.dart';
 
 void main() {
-  runApp(const MyApp());
+  runApp(
+      ChangeNotifierProvider(
+        create: (_) => StateProvider(),
+        child: const SplatournamentApp(),
+      ),);
 }
 
-class MyApp extends StatelessWidget {
+class SplatournamentApp extends StatelessWidget {
-  const MyApp({super.key});
+  const SplatournamentApp({super.key});
   @override
   Widget build(BuildContext context) {
+    final stateProvider = Provider.of<StateProvider>(context);
     return MaterialApp.router(
       title: 'Splatournament Manager',
       routerConfig: routes,
+      themeMode: stateProvider.theme,
+      theme: ThemeData(
+        brightness: Brightness.light,
+        primarySwatch: Colors.blue,
+      ),
+      darkTheme: ThemeData(
+        brightness: Brightness.dark,
+        primarySwatch: Colors.deepPurple,
+      ),
     );
   }
 }

frontend_splatournament_manager/lib/settings_page.dart

@@ -1,17 +1,14 @@
 import 'package:flutter/material.dart';
+import 'package:frontend_splatournament_manager/widgets/theme_selector_widget.dart';
 
 class SettingsPage extends StatefulWidget {
   const SettingsPage({super.key});
 
-  static const List<String> themes = ['System', 'Dark', 'Light'];
-
   @override
   State<SettingsPage> createState() => _SettingsPageState();
 }
 
 class _SettingsPageState extends State<SettingsPage> {
-  var dropDownValue = SettingsPage.themes[0];
-
   @override
   Widget build(BuildContext context) {
     return Scaffold(
@@ -19,23 +16,7 @@ class _SettingsPageState extends State<SettingsPage> {
       body: Center(
         child: Column(
           mainAxisSize: MainAxisSize.min,
-          children: [
+          children: [ThemeSelectorWidget()],
-            Text("Settings"),
-            DropdownButton(
-              value: dropDownValue,
-              icon: Icon(Icons.color_lens),
-              items: SettingsPage.themes
-                  .map((e) => DropdownMenuItem(value: e, child: Text(e)))
-                  .toList(),
-              onChanged: (value){
-                if(value == null) return;
-                print(value);
-                setState(() {
-                  dropDownValue = value;
-                });
-              },
-            ),
-          ],
         ),
       ),
     );

frontend_splatournament_manager/lib/state_provider.dart

@@ -0,0 +1,12 @@
+import 'package:flutter/material.dart';
+
+class StateProvider extends ChangeNotifier {
+  ThemeMode _themeMode = ThemeMode.system;
+
+  ThemeMode get theme => _themeMode;
+
+  void setTheme(ThemeMode mode) {
+    _themeMode = mode;
+    notifyListeners();
+  }
+}

frontend_splatournament_manager/lib/widgets/theme_selector_widget.dart

@@ -0,0 +1,52 @@
+import 'package:flutter/material.dart';
+import 'package:provider/provider.dart';
+
+import '../state_provider.dart';
+
+class ThemeSelectorWidget extends StatelessWidget {
+  ThemeSelectorWidget({super.key});
+
+  final List<DropdownMenuItem> dropdownElements = [
+    DropdownMenuItem(
+      value: ThemeMode.light,
+      child: Text("Light"),
+    ),
+    DropdownMenuItem(
+      value: ThemeMode.dark,
+      child: Text("Dark"),
+    ),
+    DropdownMenuItem(
+      value: ThemeMode.system,
+      child: Text("System"),
+    ),
+  ];
+
+  @override
+  Widget build(BuildContext context) {
+    final stateProvider = Provider.of<StateProvider>(context);
+    return Container(
+      decoration: BoxDecoration(color: Theme.of(context).hoverColor, borderRadius: BorderRadius.circular(8)),
+      padding: const EdgeInsets.all(8.0),
+      margin: const EdgeInsets.all(8.0),
+      child: Row(
+        mainAxisAlignment: MainAxisAlignment.spaceBetween,
+        children: [
+          Text("Theme"),
+          SizedBox(
+            width: 250,
+            child: DropdownButtonFormField(
+              icon: Icon(Icons.color_lens),
+              items: dropdownElements,
+              initialValue: stateProvider.theme,
+              onChanged: (value) {
+                if (value == null) return;
+                stateProvider.setTheme(value);
+              },
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+
+}

frontend_splatournament_manager/test/widget_test.dart

@@ -13,7 +13,7 @@ import 'package:frontend_splatournament_manager/main.dart';
 void main() {
   testWidgets('Counter increments smoke test', (WidgetTester tester) async {
     // Build our app and trigger a frame.
-    await tester.pumpWidget(const MyApp());
+    await tester.pumpWidget(const SplatournamentApp());
 
     // Verify that our counter starts at 0.
     expect(find.text('0'), findsOneWidget);