From 9aea09d5827a873fed70a4a5943db9183dbd79ff Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Elias=20M=C3=BCller?= Date: Wed, 24 May 2023 21:53:18 +0200 Subject: [PATCH] Basic Dark theme and option for theme in settings --- lib/app.dart | 9 +- lib/data/appTheme.dart | 32 +++++++ lib/main.dart | 144 +++++++++++++++++++----------- lib/screen/settings/settings.dart | 30 +++++++ 4 files changed, 159 insertions(+), 56 deletions(-) create mode 100644 lib/data/appTheme.dart diff --git a/lib/app.dart b/lib/app.dart index a9c02ab..d2e9dd9 100644 --- a/lib/app.dart +++ b/lib/app.dart @@ -44,6 +44,7 @@ class _AppState extends State { context, controller: tabController, navBarStyle: NavBarStyle.style6, + backgroundColor: Theme.of(context).colorScheme.onSecondary, decoration: const NavBarDecoration( border: Border.symmetric(vertical: BorderSide.none, horizontal: BorderSide(color: Colors.grey, width: 1)) ), @@ -57,13 +58,13 @@ class _AppState extends State { items: [ PersistentBottomNavBarItem( activeColorPrimary: Theme.of(context).primaryColor, - inactiveColorPrimary: Theme.of(context).disabledColor, + inactiveColorPrimary: Theme.of(context).colorScheme.secondary, icon: const Icon(Icons.calendar_month), title: "Vertretung" ), PersistentBottomNavBarItem( activeColorPrimary: Theme.of(context).primaryColor, - inactiveColorPrimary: Theme.of(context).disabledColor, + inactiveColorPrimary: Theme.of(context).colorScheme.secondary, icon: Consumer( builder: (context, value, child) { if(value.primaryLoading()) return const Icon(Icons.chat); @@ -86,13 +87,13 @@ class _AppState extends State { ), PersistentBottomNavBarItem( activeColorPrimary: Theme.of(context).primaryColor, - inactiveColorPrimary: Theme.of(context).disabledColor, + inactiveColorPrimary: Theme.of(context).colorScheme.secondary, icon: const Icon(Icons.folder), title: "Dateien" ), PersistentBottomNavBarItem( activeColorPrimary: Theme.of(context).primaryColor, - inactiveColorPrimary: Theme.of(context).disabledColor, + inactiveColorPrimary: Theme.of(context).colorScheme.secondary, icon: const Icon(Icons.more_horiz), title: "Mehr" ), diff --git a/lib/data/appTheme.dart b/lib/data/appTheme.dart new file mode 100644 index 0000000..fe601ca --- /dev/null +++ b/lib/data/appTheme.dart @@ -0,0 +1,32 @@ +import 'package:flutter/material.dart'; + +class AppTheme extends ChangeNotifier { + ThemeMode _mode = ThemeMode.system; + ThemeMode get getMode => _mode; + + void setTheme(ThemeMode newMode) { + _mode = newMode; + notifyListeners(); + } + + static ThemeModeDisplay getDisplayOptions(ThemeMode theme) { + switch(theme) { + case ThemeMode.system: + return ThemeModeDisplay(icon: Icons.auto_awesome, displayName: "Systemvorgabe"); + + case ThemeMode.light: + return ThemeModeDisplay(icon: Icons.dark_mode_outlined, displayName: "Hell"); + + case ThemeMode.dark: + return ThemeModeDisplay(icon: Icons.dark_mode, displayName: "Dunkel"); + + } + } +} + +class ThemeModeDisplay { + final IconData icon; + final String displayName; + + ThemeModeDisplay({required this.icon, required this.displayName}); +} \ No newline at end of file diff --git a/lib/main.dart b/lib/main.dart index 82df1b4..d8181a0 100644 --- a/lib/main.dart +++ b/lib/main.dart @@ -3,6 +3,7 @@ import 'dart:io'; import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; import 'package:jiffy/jiffy.dart'; +import 'package:marianum_mobile/data/appTheme.dart'; import 'package:marianum_mobile/data/timetable/timetableProps.dart'; import 'package:marianum_mobile/screen/login/login.dart'; import 'package:marianum_mobile/widget/errorView.dart'; @@ -30,6 +31,7 @@ Future main() async { MultiProvider( providers: [ ChangeNotifierProvider(create: (context) => AccountModel()), + ChangeNotifierProvider(create: (context) => AppTheme()), ChangeNotifierProvider(create: (context) => TimetableProps()), ChangeNotifierProvider(create: (context) => ChatListProps()), ChangeNotifierProvider(create: (context) => ChatProps()), @@ -70,63 +72,101 @@ class _MainState extends State
{ Widget build(BuildContext context) { SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp]); - return MaterialApp( - debugShowCheckedModeBanner: false, - localizationsDelegates: const [ - ...GlobalMaterialLocalizations.delegates, - GlobalWidgetsLocalizations.delegate, - ], - supportedLocales: const [ - Locale('de'), - Locale('en'), - ], - locale: const Locale('de'), + return Directionality( + textDirection: TextDirection.ltr, + child: Consumer( + builder: (context, value, child) { + return MaterialApp( + debugShowCheckedModeBanner: false, + localizationsDelegates: const [ + ...GlobalMaterialLocalizations.delegates, + GlobalWidgetsLocalizations.delegate, + ], + supportedLocales: const [ + Locale('de'), + Locale('en'), + ], + locale: const Locale('de'), - title: 'Marianum Fulda', - theme: ThemeData( - brightness: Brightness.light, - primaryColor: marianumRed, - colorScheme: const ColorScheme( - brightness: Brightness.light, - surface: Colors.white, - onSurface: Colors.black, - onSecondary: Colors.white, - onPrimary: Colors.white, - onError: marianumRed, - onBackground: Colors.black, - error: marianumRed, - background: Colors.white, - secondary: marianumRed, - primary: marianumRed, - ), - hintColor: marianumRed, - inputDecorationTheme: const InputDecorationTheme( - border: UnderlineInputBorder(borderSide: BorderSide(color: marianumRed)), - ), - appBarTheme: const AppBarTheme( - backgroundColor: marianumRed, - ), - progressIndicatorTheme: const ProgressIndicatorThemeData( - color: marianumRed, - ), - ), + title: 'Marianum Fulda', - home: FutureBuilder( - future: _storage, - builder: (BuildContext context, AsyncSnapshot snapshot) { + themeMode: value.getMode, + theme: ThemeData( + brightness: Brightness.light, + primaryColor: marianumRed, + colorScheme: const ColorScheme( + brightness: Brightness.light, + surface: Colors.white, + onSurface: Colors.black, + onSecondary: Colors.white, + onPrimary: Colors.white, + onError: marianumRed, + onBackground: Colors.black, + error: marianumRed, + background: Colors.white, + secondary: Colors.grey, + primary: marianumRed, + ), + hintColor: marianumRed, + inputDecorationTheme: const InputDecorationTheme( + border: UnderlineInputBorder(borderSide: BorderSide(color: marianumRed)), + ), + appBarTheme: const AppBarTheme( + backgroundColor: marianumRed, + ), + progressIndicatorTheme: const ProgressIndicatorThemeData( + color: marianumRed, + ), + ), - if(snapshot.hasData) { - return Consumer( - builder: (context, accountModel, child) { - return accountModel.isLoggedIn ? const App() : const Login(); - }, - ); - } else { - return const Center(child: CircularProgressIndicator()); - } + darkTheme: ThemeData( + brightness: Brightness.dark, + primaryColor: marianumRed, + colorScheme: const ColorScheme( + brightness: Brightness.dark, + surface: Colors.white, + onSurface: Colors.white, + onSecondary: Colors.black, + onPrimary: Colors.black, + onError: marianumRed, + onBackground: Colors.black, + error: marianumRed, + background: Colors.black, + secondary: Colors.grey, + primary: marianumRed, + ), + hintColor: marianumRed, + inputDecorationTheme: const InputDecorationTheme( + border: UnderlineInputBorder(borderSide: BorderSide(color: marianumRed)), + ), + appBarTheme: const AppBarTheme( + backgroundColor: marianumRed, + ), + progressIndicatorTheme: const ProgressIndicatorThemeData( + color: marianumRed, + ), + ), + + + home: FutureBuilder( + future: _storage, + builder: (BuildContext context, AsyncSnapshot snapshot) { + + if(snapshot.hasData) { + return Consumer( + builder: (context, accountModel, child) { + return accountModel.isLoggedIn ? const App() : const Login(); + }, + ); + } else { + return const Center(child: CircularProgressIndicator()); + } + }, + ) + ); }, - ) + ), ); } } diff --git a/lib/screen/settings/settings.dart b/lib/screen/settings/settings.dart index e2e0300..cd64dec 100644 --- a/lib/screen/settings/settings.dart +++ b/lib/screen/settings/settings.dart @@ -6,6 +6,7 @@ import 'package:shared_preferences/shared_preferences.dart'; import 'package:url_launcher/url_launcher.dart'; import '../../data/accountModel.dart'; +import '../../data/appTheme.dart'; import 'debug/debugOverview.dart'; class Settings extends StatefulWidget { @@ -72,6 +73,35 @@ class _SettingsState extends State { const Divider(), + Consumer( + builder: (context, value, child) { + return ListTile( + leading: const Icon(Icons.dark_mode), + title: const Text("Farbgebung"), + trailing: DropdownButton( + value: value.getMode, + icon: const Icon(Icons.arrow_drop_down), + items: ThemeMode.values.map((e) => DropdownMenuItem( + value: e, + enabled: e != value.getMode, + child: Row( + children: [ + Icon(AppTheme.getDisplayOptions(e).icon), + const SizedBox(width: 10), + Text(AppTheme.getDisplayOptions(e).displayName), + ], + ), + )).toList(), + onChanged: (e) { + Provider.of(context, listen: false).setTheme(e ?? ThemeMode.system); + }, + ), + ); + }, + ), + + const Divider(), + ListTile( leading: const Icon(Icons.info), title: const Text("Informationen und Lizenzen"),