Basic Dark theme and option for theme in settings
This commit is contained in:
parent
9a1247de5f
commit
9aea09d582
@ -44,6 +44,7 @@ class _AppState extends State<App> {
|
||||
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<App> {
|
||||
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<ChatListProps>(
|
||||
builder: (context, value, child) {
|
||||
if(value.primaryLoading()) return const Icon(Icons.chat);
|
||||
@ -86,13 +87,13 @@ class _AppState extends State<App> {
|
||||
),
|
||||
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"
|
||||
),
|
||||
|
||||
32
lib/data/appTheme.dart
Normal file
32
lib/data/appTheme.dart
Normal file
@ -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});
|
||||
}
|
||||
144
lib/main.dart
144
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<void> 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<Main> {
|
||||
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<AppTheme>(
|
||||
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<SharedPreferences>(
|
||||
future: _storage,
|
||||
builder: (BuildContext context, AsyncSnapshot<SharedPreferences> 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<AccountModel>(
|
||||
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<SharedPreferences>(
|
||||
future: _storage,
|
||||
builder: (BuildContext context, AsyncSnapshot<SharedPreferences> snapshot) {
|
||||
|
||||
if(snapshot.hasData) {
|
||||
return Consumer<AccountModel>(
|
||||
builder: (context, accountModel, child) {
|
||||
return accountModel.isLoggedIn ? const App() : const Login();
|
||||
},
|
||||
);
|
||||
} else {
|
||||
return const Center(child: CircularProgressIndicator());
|
||||
}
|
||||
},
|
||||
)
|
||||
);
|
||||
},
|
||||
)
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -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<Settings> {
|
||||
|
||||
const Divider(),
|
||||
|
||||
Consumer<AppTheme>(
|
||||
builder: (context, value, child) {
|
||||
return ListTile(
|
||||
leading: const Icon(Icons.dark_mode),
|
||||
title: const Text("Farbgebung"),
|
||||
trailing: DropdownButton<ThemeMode>(
|
||||
value: value.getMode,
|
||||
icon: const Icon(Icons.arrow_drop_down),
|
||||
items: ThemeMode.values.map((e) => DropdownMenuItem<ThemeMode>(
|
||||
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<AppTheme>(context, listen: false).setTheme(e ?? ThemeMode.system);
|
||||
},
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
|
||||
const Divider(),
|
||||
|
||||
ListTile(
|
||||
leading: const Icon(Icons.info),
|
||||
title: const Text("Informationen und Lizenzen"),
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user