refactor: Use adaptive_theme
Christian Pauly
5 years ago
parent
8e5b1ec8b3
commit
2cf9bf4810
@ -1,83 +0,0 @@
|
|||||||
import 'package:flutter/material.dart';
|
|
||||||
import 'package:flutter_gen/gen_l10n/l10n.dart';
|
|
||||||
|
|
||||||
import '../components/matrix.dart';
|
|
||||||
import '../components/theme_switcher.dart';
|
|
||||||
|
|
||||||
class ThemesSettings extends StatefulWidget {
|
|
||||||
@override
|
|
||||||
ThemesSettingsState createState() => ThemesSettingsState();
|
|
||||||
}
|
|
||||||
|
|
||||||
class ThemesSettingsState extends State<ThemesSettings> {
|
|
||||||
Themes _selectedTheme;
|
|
||||||
bool _amoledEnabled;
|
|
||||||
|
|
||||||
@override
|
|
||||||
Widget build(BuildContext context) {
|
|
||||||
final matrix = Matrix.of(context);
|
|
||||||
final themeEngine = ThemeSwitcherWidget.of(context);
|
|
||||||
_selectedTheme = themeEngine.selectedTheme;
|
|
||||||
_amoledEnabled = themeEngine.amoledEnabled;
|
|
||||||
|
|
||||||
return Column(
|
|
||||||
children: <Widget>[
|
|
||||||
RadioListTile<Themes>(
|
|
||||||
title: Text(
|
|
||||||
L10n.of(context).systemTheme,
|
|
||||||
),
|
|
||||||
value: Themes.system,
|
|
||||||
groupValue: _selectedTheme,
|
|
||||||
activeColor: Theme.of(context).primaryColor,
|
|
||||||
onChanged: (Themes value) {
|
|
||||||
setState(() {
|
|
||||||
_selectedTheme = value;
|
|
||||||
themeEngine.switchTheme(matrix, value, _amoledEnabled);
|
|
||||||
});
|
|
||||||
},
|
|
||||||
),
|
|
||||||
RadioListTile<Themes>(
|
|
||||||
title: Text(
|
|
||||||
L10n.of(context).lightTheme,
|
|
||||||
),
|
|
||||||
value: Themes.light,
|
|
||||||
groupValue: _selectedTheme,
|
|
||||||
activeColor: Theme.of(context).primaryColor,
|
|
||||||
onChanged: (Themes value) {
|
|
||||||
setState(() {
|
|
||||||
_selectedTheme = value;
|
|
||||||
themeEngine.switchTheme(matrix, value, _amoledEnabled);
|
|
||||||
});
|
|
||||||
},
|
|
||||||
),
|
|
||||||
RadioListTile<Themes>(
|
|
||||||
title: Text(
|
|
||||||
L10n.of(context).darkTheme,
|
|
||||||
),
|
|
||||||
value: Themes.dark,
|
|
||||||
groupValue: _selectedTheme,
|
|
||||||
activeColor: Theme.of(context).primaryColor,
|
|
||||||
onChanged: (Themes value) {
|
|
||||||
setState(() {
|
|
||||||
_selectedTheme = value;
|
|
||||||
themeEngine.switchTheme(matrix, value, _amoledEnabled);
|
|
||||||
});
|
|
||||||
},
|
|
||||||
),
|
|
||||||
SwitchListTile(
|
|
||||||
title: Text(
|
|
||||||
L10n.of(context).useAmoledTheme,
|
|
||||||
),
|
|
||||||
value: _amoledEnabled,
|
|
||||||
activeColor: Theme.of(context).primaryColor,
|
|
||||||
onChanged: (bool value) {
|
|
||||||
setState(() {
|
|
||||||
_amoledEnabled = value;
|
|
||||||
themeEngine.switchTheme(matrix, _selectedTheme, value);
|
|
||||||
});
|
|
||||||
},
|
|
||||||
),
|
|
||||||
],
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,276 +0,0 @@
|
|||||||
import 'package:flutter/foundation.dart';
|
|
||||||
import 'package:flutter/material.dart';
|
|
||||||
import 'matrix.dart';
|
|
||||||
import '../config/setting_keys.dart';
|
|
||||||
|
|
||||||
enum Themes {
|
|
||||||
light,
|
|
||||||
dark,
|
|
||||||
system,
|
|
||||||
}
|
|
||||||
|
|
||||||
final ThemeData lightTheme = ThemeData(
|
|
||||||
primaryColorDark: Colors.white,
|
|
||||||
primaryColorLight: Color(0xff121212),
|
|
||||||
brightness: Brightness.light,
|
|
||||||
primaryColor: Color(0xFF5625BA),
|
|
||||||
backgroundColor: Colors.white,
|
|
||||||
secondaryHeaderColor: Color(0xFFECECF2),
|
|
||||||
scaffoldBackgroundColor: Colors.white,
|
|
||||||
snackBarTheme: SnackBarThemeData(
|
|
||||||
behavior: kIsWeb ? SnackBarBehavior.floating : SnackBarBehavior.fixed,
|
|
||||||
),
|
|
||||||
dialogTheme: DialogTheme(
|
|
||||||
shape: RoundedRectangleBorder(
|
|
||||||
borderRadius: BorderRadius.circular(8.0),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
popupMenuTheme: PopupMenuThemeData(
|
|
||||||
shape: RoundedRectangleBorder(
|
|
||||||
borderRadius: BorderRadius.circular(8.0),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
appBarTheme: AppBarTheme(
|
|
||||||
brightness: Brightness.light,
|
|
||||||
color: Colors.white,
|
|
||||||
textTheme: TextTheme(
|
|
||||||
headline6: TextStyle(
|
|
||||||
color: Colors.black,
|
|
||||||
fontSize: 20,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
iconTheme: IconThemeData(color: Colors.black),
|
|
||||||
),
|
|
||||||
);
|
|
||||||
|
|
||||||
final ThemeData darkTheme = ThemeData.dark().copyWith(
|
|
||||||
primaryColorDark: Color(0xff1B1B1B),
|
|
||||||
primaryColorLight: Colors.white,
|
|
||||||
primaryColor: Color(0xFF8966CF),
|
|
||||||
errorColor: Color(0xFFCF6679),
|
|
||||||
backgroundColor: Color(0xff121212),
|
|
||||||
scaffoldBackgroundColor: Color(0xff1B1B1B),
|
|
||||||
accentColor: Color(0xFFF5B4D2),
|
|
||||||
secondaryHeaderColor: Color(0xff202020),
|
|
||||||
snackBarTheme: SnackBarThemeData(
|
|
||||||
behavior: kIsWeb ? SnackBarBehavior.floating : SnackBarBehavior.fixed,
|
|
||||||
),
|
|
||||||
dialogTheme: DialogTheme(
|
|
||||||
shape: RoundedRectangleBorder(
|
|
||||||
borderRadius: BorderRadius.circular(8.0),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
popupMenuTheme: PopupMenuThemeData(
|
|
||||||
shape: RoundedRectangleBorder(
|
|
||||||
borderRadius: BorderRadius.circular(8.0),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
appBarTheme: AppBarTheme(
|
|
||||||
brightness: Brightness.dark,
|
|
||||||
color: Color(0xff1D1D1D),
|
|
||||||
textTheme: TextTheme(
|
|
||||||
headline6: TextStyle(
|
|
||||||
color: Colors.white,
|
|
||||||
fontSize: 20,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
iconTheme: IconThemeData(color: Colors.white),
|
|
||||||
),
|
|
||||||
);
|
|
||||||
|
|
||||||
final ThemeData amoledTheme = ThemeData.dark().copyWith(
|
|
||||||
primaryColorDark: Color(0xff121212),
|
|
||||||
primaryColorLight: Colors.white,
|
|
||||||
primaryColor: Color(0xFF8966CF),
|
|
||||||
errorColor: Color(0xFFCF6679),
|
|
||||||
backgroundColor: Colors.black,
|
|
||||||
scaffoldBackgroundColor: Colors.black,
|
|
||||||
accentColor: Color(0xFFF5B4D2),
|
|
||||||
secondaryHeaderColor: Color(0xff1D1D1D),
|
|
||||||
snackBarTheme: SnackBarThemeData(
|
|
||||||
behavior: kIsWeb ? SnackBarBehavior.floating : SnackBarBehavior.fixed,
|
|
||||||
),
|
|
||||||
dialogTheme: DialogTheme(
|
|
||||||
shape: RoundedRectangleBorder(
|
|
||||||
borderRadius: BorderRadius.circular(8.0),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
popupMenuTheme: PopupMenuThemeData(
|
|
||||||
shape: RoundedRectangleBorder(
|
|
||||||
borderRadius: BorderRadius.circular(8.0),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
appBarTheme: AppBarTheme(
|
|
||||||
brightness: Brightness.dark,
|
|
||||||
color: Color(0xff1D1D1D),
|
|
||||||
textTheme: TextTheme(
|
|
||||||
headline6: TextStyle(
|
|
||||||
color: Colors.white,
|
|
||||||
fontSize: 20,
|
|
||||||
),
|
|
||||||
),
|
|
||||||
iconTheme: IconThemeData(color: Colors.white),
|
|
||||||
),
|
|
||||||
);
|
|
||||||
|
|
||||||
Color chatListItemColor(BuildContext context, bool activeChat, bool selected) =>
|
|
||||||
selected
|
|
||||||
? Theme.of(context).primaryColor.withAlpha(100)
|
|
||||||
: Theme.of(context).brightness == Brightness.light
|
|
||||||
? activeChat
|
|
||||||
? Color(0xFFE8E8E8)
|
|
||||||
: Colors.white
|
|
||||||
: activeChat
|
|
||||||
? ThemeSwitcherWidget.of(context).amoledEnabled
|
|
||||||
? Color(0xff121212)
|
|
||||||
: Colors.black
|
|
||||||
: ThemeSwitcherWidget.of(context).amoledEnabled
|
|
||||||
? Colors.black
|
|
||||||
: Color(0xff121212);
|
|
||||||
|
|
||||||
Color blackWhiteColor(BuildContext context) =>
|
|
||||||
Theme.of(context).brightness == Brightness.light
|
|
||||||
? Colors.white
|
|
||||||
: Colors.black;
|
|
||||||
|
|
||||||
class ThemeSwitcher extends InheritedWidget {
|
|
||||||
final ThemeSwitcherWidgetState data;
|
|
||||||
|
|
||||||
const ThemeSwitcher({
|
|
||||||
Key key,
|
|
||||||
@required this.data,
|
|
||||||
@required Widget child,
|
|
||||||
}) : assert(child != null),
|
|
||||||
super(key: key, child: child);
|
|
||||||
|
|
||||||
@override
|
|
||||||
bool updateShouldNotify(ThemeSwitcher old) {
|
|
||||||
return this != old;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
class ThemeSwitcherWidget extends StatefulWidget {
|
|
||||||
final Widget child;
|
|
||||||
|
|
||||||
ThemeSwitcherWidget({Key key, @required this.child})
|
|
||||||
: assert(child != null),
|
|
||||||
super(key: key);
|
|
||||||
|
|
||||||
@override
|
|
||||||
ThemeSwitcherWidgetState createState() => ThemeSwitcherWidgetState();
|
|
||||||
|
|
||||||
/// Returns the (nearest) Client instance of your application.
|
|
||||||
static ThemeSwitcherWidgetState of(BuildContext context) {
|
|
||||||
var newState =
|
|
||||||
(context.dependOnInheritedWidgetOfExactType<ThemeSwitcher>()).data;
|
|
||||||
newState.context = context;
|
|
||||||
return newState;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
class ThemeSwitcherWidgetState extends State<ThemeSwitcherWidget> {
|
|
||||||
ThemeData themeData;
|
|
||||||
Themes selectedTheme;
|
|
||||||
bool amoledEnabled;
|
|
||||||
@override
|
|
||||||
BuildContext context;
|
|
||||||
|
|
||||||
Future loadSelection(MatrixState matrix) async {
|
|
||||||
var item = await matrix.store.getItem(SettingKeys.theme) ?? 'system';
|
|
||||||
selectedTheme = Themes.values.firstWhere(
|
|
||||||
(e) => e.toString() == 'Themes.' + item,
|
|
||||||
orElse: () => Themes.system);
|
|
||||||
|
|
||||||
amoledEnabled = await matrix.store.getItemBool(SettingKeys.amoledEnabled);
|
|
||||||
|
|
||||||
switchTheme(matrix, selectedTheme, amoledEnabled);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
void switchTheme(
|
|
||||||
MatrixState matrix, Themes newTheme, bool amoled_enabled) async {
|
|
||||||
ThemeData theme;
|
|
||||||
switch (newTheme) {
|
|
||||||
case Themes.light:
|
|
||||||
theme = lightTheme;
|
|
||||||
break;
|
|
||||||
case Themes.dark:
|
|
||||||
if (amoled_enabled) {
|
|
||||||
theme = amoledTheme;
|
|
||||||
} else {
|
|
||||||
theme = darkTheme;
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
case Themes.system:
|
|
||||||
// This needs to be a low level call as we don't have a MaterialApp yet
|
|
||||||
var brightness =
|
|
||||||
MediaQueryData.fromWindow(WidgetsBinding.instance.window)
|
|
||||||
.platformBrightness;
|
|
||||||
if (brightness == Brightness.dark) {
|
|
||||||
if (amoled_enabled) {
|
|
||||||
theme = amoledTheme;
|
|
||||||
} else {
|
|
||||||
theme = darkTheme;
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
theme = lightTheme;
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
|
|
||||||
await saveThemeValue(matrix, newTheme);
|
|
||||||
await saveAmoledEnabledValue(matrix, amoled_enabled);
|
|
||||||
setState(() {
|
|
||||||
amoledEnabled = amoled_enabled;
|
|
||||||
selectedTheme = newTheme;
|
|
||||||
themeData = theme;
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
Future saveThemeValue(MatrixState matrix, Themes value) async {
|
|
||||||
await matrix.store
|
|
||||||
.setItem(SettingKeys.theme, value.toString().split('.').last);
|
|
||||||
}
|
|
||||||
|
|
||||||
Future saveAmoledEnabledValue(MatrixState matrix, bool value) async {
|
|
||||||
await matrix.store.setItem(SettingKeys.amoledEnabled, value.toString());
|
|
||||||
}
|
|
||||||
|
|
||||||
void setup() async {
|
|
||||||
final matrix = Matrix.of(context);
|
|
||||||
await loadSelection(matrix);
|
|
||||||
}
|
|
||||||
|
|
||||||
@override
|
|
||||||
void initState() {
|
|
||||||
WidgetsBinding.instance.addPostFrameCallback((_) {
|
|
||||||
if (amoledEnabled == null || selectedTheme == null) {
|
|
||||||
setup();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
super.initState();
|
|
||||||
}
|
|
||||||
|
|
||||||
@override
|
|
||||||
Widget build(BuildContext context) {
|
|
||||||
if (themeData == null) {
|
|
||||||
// This needs to be a low level call as we don't have a MaterialApp yet
|
|
||||||
var brightness = MediaQueryData.fromWindow(WidgetsBinding.instance.window)
|
|
||||||
.platformBrightness;
|
|
||||||
if (brightness == Brightness.dark) {
|
|
||||||
themeData = darkTheme;
|
|
||||||
} else {
|
|
||||||
themeData = lightTheme;
|
|
||||||
}
|
|
||||||
return ThemeSwitcher(
|
|
||||||
data: this,
|
|
||||||
child: widget.child,
|
|
||||||
);
|
|
||||||
} else {
|
|
||||||
return ThemeSwitcher(
|
|
||||||
data: this,
|
|
||||||
child: widget.child,
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -0,0 +1,90 @@
|
|||||||
|
import 'package:flutter/foundation.dart';
|
||||||
|
import 'package:flutter/material.dart';
|
||||||
|
|
||||||
|
abstract class FluffyThemes {
|
||||||
|
static ThemeData light = ThemeData(
|
||||||
|
primaryColorDark: Colors.white,
|
||||||
|
primaryColorLight: Color(0xff121212),
|
||||||
|
brightness: Brightness.light,
|
||||||
|
primaryColor: Color(0xFF5625BA),
|
||||||
|
backgroundColor: Colors.white,
|
||||||
|
secondaryHeaderColor: Color(0xFFECECF2),
|
||||||
|
scaffoldBackgroundColor: Colors.white,
|
||||||
|
snackBarTheme: SnackBarThemeData(
|
||||||
|
behavior: kIsWeb ? SnackBarBehavior.floating : SnackBarBehavior.fixed,
|
||||||
|
),
|
||||||
|
dialogTheme: DialogTheme(
|
||||||
|
shape: RoundedRectangleBorder(
|
||||||
|
borderRadius: BorderRadius.circular(8.0),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
popupMenuTheme: PopupMenuThemeData(
|
||||||
|
shape: RoundedRectangleBorder(
|
||||||
|
borderRadius: BorderRadius.circular(8.0),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
appBarTheme: AppBarTheme(
|
||||||
|
brightness: Brightness.light,
|
||||||
|
color: Colors.white,
|
||||||
|
textTheme: TextTheme(
|
||||||
|
headline6: TextStyle(
|
||||||
|
color: Colors.black,
|
||||||
|
fontSize: 20,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
iconTheme: IconThemeData(color: Colors.black),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
|
||||||
|
static ThemeData dark = ThemeData.dark().copyWith(
|
||||||
|
primaryColorDark: Color(0xff121212),
|
||||||
|
primaryColorLight: Colors.white,
|
||||||
|
primaryColor: Color(0xFF8966CF),
|
||||||
|
errorColor: Color(0xFFCF6679),
|
||||||
|
backgroundColor: Colors.black,
|
||||||
|
scaffoldBackgroundColor: Colors.black,
|
||||||
|
accentColor: Color(0xFFF5B4D2),
|
||||||
|
secondaryHeaderColor: Color(0xff1D1D1D),
|
||||||
|
snackBarTheme: SnackBarThemeData(
|
||||||
|
behavior: kIsWeb ? SnackBarBehavior.floating : SnackBarBehavior.fixed,
|
||||||
|
),
|
||||||
|
dialogTheme: DialogTheme(
|
||||||
|
shape: RoundedRectangleBorder(
|
||||||
|
borderRadius: BorderRadius.circular(8.0),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
popupMenuTheme: PopupMenuThemeData(
|
||||||
|
shape: RoundedRectangleBorder(
|
||||||
|
borderRadius: BorderRadius.circular(8.0),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
appBarTheme: AppBarTheme(
|
||||||
|
brightness: Brightness.dark,
|
||||||
|
color: Color(0xff1D1D1D),
|
||||||
|
textTheme: TextTheme(
|
||||||
|
headline6: TextStyle(
|
||||||
|
color: Colors.white,
|
||||||
|
fontSize: 20,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
iconTheme: IconThemeData(color: Colors.white),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
|
||||||
|
static Color chatListItemColor(
|
||||||
|
BuildContext context, bool activeChat, bool selected) =>
|
||||||
|
selected
|
||||||
|
? Theme.of(context).primaryColor.withAlpha(100)
|
||||||
|
: Theme.of(context).brightness == Brightness.light
|
||||||
|
? activeChat
|
||||||
|
? Color(0xFFE8E8E8)
|
||||||
|
: Colors.white
|
||||||
|
: activeChat
|
||||||
|
? Color(0xff121212)
|
||||||
|
: Colors.black;
|
||||||
|
|
||||||
|
static Color blackWhiteColor(BuildContext context) =>
|
||||||
|
Theme.of(context).brightness == Brightness.light
|
||||||
|
? Colors.white
|
||||||
|
: Colors.black;
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue