tsacdop-podcast-app-android/lib/settings/theme.dart

405 lines
19 KiB
Dart

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:provider/provider.dart';
import '../state/setting_state.dart';
import '../util/extension_helper.dart';
import '../widgets/custom_widget.dart';
import '../widgets/general_dialog.dart';
class ThemeSetting extends StatelessWidget {
@override
Widget build(BuildContext context) {
final s = context.s;
var settings = Provider.of<SettingState>(context, listen: false);
return AnnotatedRegion<SystemUiOverlayStyle>(
value: SystemUiOverlayStyle(
statusBarIconBrightness: Theme.of(context).accentColorBrightness,
systemNavigationBarColor: Theme.of(context).primaryColor,
systemNavigationBarIconBrightness:
Theme.of(context).accentColorBrightness,
),
child: Scaffold(
appBar: AppBar(
title: Text(s.settingsAppearance),
leading: CustomBackButton(),
elevation: 0,
backgroundColor: Theme.of(context).primaryColor,
),
body: Column(
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Padding(
padding: EdgeInsets.all(10.0),
),
Container(
height: 30.0,
padding: EdgeInsets.symmetric(horizontal: 70),
alignment: Alignment.centerLeft,
child: Text(s.settingsInterface,
style: Theme.of(context)
.textTheme
.bodyText1
.copyWith(color: Theme.of(context).accentColor)),
),
ListTile(
onTap: () => showGeneralDialog(
context: context,
barrierDismissible: true,
barrierLabel: MaterialLocalizations.of(context)
.modalBarrierDismissLabel,
barrierColor: Colors.black54,
transitionDuration: const Duration(milliseconds: 200),
pageBuilder: (context, animaiton, secondaryAnimation) =>
AnnotatedRegion<SystemUiOverlayStyle>(
value: SystemUiOverlayStyle(
statusBarIconBrightness: Brightness.light,
systemNavigationBarColor:
Theme.of(context).brightness == Brightness.light
? Color.fromRGBO(113, 113, 113, 1)
: Color.fromRGBO(15, 15, 15, 1),
),
child: AlertDialog(
titlePadding: EdgeInsets.only(
top: 20,
left: 40,
right: context.width / 3,
),
elevation: 1,
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.all(Radius.circular(10.0))),
title: Text(s.settingsTheme),
content: SingleChildScrollView(
scrollDirection: Axis.vertical,
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
ClipRRect(
borderRadius:
BorderRadius.all(Radius.circular(5)),
child: Material(
color: Colors.transparent,
child: RadioListTile(
title: Text(s.systemDefault),
value: ThemeMode.system,
groupValue: settings.theme,
onChanged: (value) {
settings.setTheme = value;
Navigator.of(context).pop();
}),
),
),
ClipRRect(
borderRadius:
BorderRadius.all(Radius.circular(5)),
child: Material(
color: Colors.transparent,
child: RadioListTile(
title: Text(s.darkMode),
value: ThemeMode.dark,
groupValue: settings.theme,
onChanged: (value) {
settings.setTheme = value;
Navigator.of(context).pop();
}),
),
),
ClipRRect(
borderRadius:
BorderRadius.all(Radius.circular(5)),
child: Material(
color: Colors.transparent,
child: RadioListTile(
title: Text(s.lightMode),
value: ThemeMode.light,
groupValue: settings.theme,
onChanged: (value) {
settings.setTheme = value;
Navigator.of(context).pop();
}),
),
),
],
),
),
),
)),
contentPadding: EdgeInsets.symmetric(horizontal: 70.0),
// leading: Icon(Icons.colorize),
title: Text(s.settingsTheme),
subtitle: Text(s.systemDefault),
),
Selector<SettingState, bool>(
selector: (_, setting) => setting.realDark,
builder: (_, data, __) => ListTile(
onTap: () => settings.setRealDark = !data,
contentPadding: const EdgeInsets.only(
left: 70.0, right: 20, bottom: 10, top: 10),
// leading: Icon(Icons.colorize),
title: Text(
s.settingsRealDark,
),
subtitle: Text(s.settingsRealDarkDes),
trailing: Transform.scale(
scale: 0.9,
child: Switch(
value: data,
onChanged: (boo) async {
settings.setRealDark = boo;
}),
),
),
),
ListTile(
onTap: () => generalDialog(
context,
title: Text.rich(TextSpan(text: s.chooseA, children: [
TextSpan(
text: ' ${s.color}',
style: TextStyle(
fontWeight: FontWeight.bold,
color: context.accentColor))
])),
content: _ColorPicker(
onColorChanged: (value) => settings.setAccentColor = value,
),
),
contentPadding: EdgeInsets.only(left: 70.0, right: 35),
title: Text(s.settingsAccentColor),
subtitle: Text(s.settingsAccentColorDes),
trailing: Container(
height: 25,
width: 25,
decoration: BoxDecoration(
shape: BoxShape.circle, color: context.accentColor),
),
),
Divider(height: 1),
Padding(
padding: EdgeInsets.all(10.0),
),
Container(
height: 30.0,
padding: EdgeInsets.symmetric(horizontal: 70),
alignment: Alignment.centerLeft,
child: Text(s.fontStyle,
style: context.textTheme.bodyText1
.copyWith(color: context.accentColor)),
),
Selector<SettingState, int>(
selector: (_, setting) => setting.showNotesFontIndex,
builder: (_, data, __) => ListTile(
contentPadding: const EdgeInsets.only(
left: 70.0, right: 20, bottom: 10, top: 10),
title: Text(s.showNotesFonts),
subtitle: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: showNotesFontStyles.map<Widget>((textStyle) {
final index = showNotesFontStyles.indexOf(textStyle);
return Padding(
padding: const EdgeInsets.symmetric(vertical: 10),
child: InkWell(
onTap: () => settings.setShowNoteFontStyle = index,
borderRadius: BorderRadius.circular(10.0),
child: Container(
height: 60,
width: 80,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
border: Border.all(
color: data == index
? context.accentColor.withAlpha(70)
: context.primaryColorDark),
color: data == index
? context.accentColor.withAlpha(70)
: Colors.transparent),
alignment: Alignment.center,
child: Text(
'Show notes',
textAlign: TextAlign.center,
style: textStyle,
),
),
),
);
}).toList(),
),
),
),
Divider(height: 1)
],
),
),
);
}
}
class _ColorPicker extends StatefulWidget {
final ValueChanged<Color> onColorChanged;
_ColorPicker({Key key, this.onColorChanged}) : super(key: key);
@override
__ColorPickerState createState() => __ColorPickerState();
}
class __ColorPickerState extends State<_ColorPicker>
with SingleTickerProviderStateMixin {
TabController _controller;
int _index;
@override
void initState() {
super.initState();
_index = 0;
_controller = TabController(length: Colors.primaries.length, vsync: this)
..addListener(() {
setState(() => _index = _controller.index);
});
}
Widget _colorCircle(Color color) => Material(
color: Colors.transparent,
child: InkWell(
borderRadius: BorderRadius.all(Radius.circular(10)),
onTap: () => widget.onColorChanged(color),
child: Container(
decoration: BoxDecoration(
border: color == context.accentColor
? Border.all(color: Colors.grey[400], width: 4)
: null,
borderRadius: BorderRadius.all(Radius.circular(10)),
color: color),
),
),
);
List<Widget> _accentList(MaterialAccentColor color) => [
_colorCircle(color.shade100),
_colorCircle(color.shade200),
_colorCircle(color.shade400),
_colorCircle(color.shade700)
];
@override
Widget build(BuildContext context) {
return Container(
width: 400,
height: 400,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Container(
height: 40,
color: Theme.of(context).dialogBackgroundColor,
child: TabBar(
labelPadding: EdgeInsets.symmetric(horizontal: 10),
controller: _controller,
indicatorColor: Colors.transparent,
indicatorSize: TabBarIndicatorSize.tab,
isScrollable: true,
tabs: Colors.primaries
.map<Widget>((color) => Tab(
child: Container(
height: 20,
width: 40,
decoration: BoxDecoration(
border: Colors.primaries.indexOf(color) == _index
? Border.all(
color: Colors.grey[400], width: 2)
: null,
borderRadius:
BorderRadius.all(Radius.circular(10)),
color: color),
),
))
.toList(),
),
),
Expanded(
child: TabBarView(
physics: const ClampingScrollPhysics(),
key: UniqueKey(),
controller: _controller,
children: Colors.primaries
.map<Widget>((color) => ScrollConfiguration(
behavior: NoGrowBehavior(),
child: GridView.count(
primary: false,
padding: const EdgeInsets.fromLTRB(2, 10, 2, 10),
crossAxisSpacing: 4,
mainAxisSpacing: 4,
crossAxisCount: 3,
children: <Widget>[
_colorCircle(color.shade100),
_colorCircle(color.shade200),
_colorCircle(color.shade300),
_colorCircle(color.shade400),
_colorCircle(color.shade500),
_colorCircle(color.shade600),
_colorCircle(color.shade700),
_colorCircle(color.shade800),
_colorCircle(color.shade900),
...color == Colors.red
? _accentList(Colors.redAccent)
: color == Colors.pink
? _accentList(Colors.pinkAccent)
: color == Colors.deepOrange
? _accentList(Colors.deepOrangeAccent)
: color == Colors.orange
? _accentList(Colors.orangeAccent)
: color == Colors.amber
? _accentList(
Colors.amberAccent)
: color == Colors.yellow
? _accentList(
Colors.yellowAccent)
: color == Colors.lime
? _accentList(
Colors.limeAccent)
: color ==
Colors
.lightGreen
? _accentList(Colors
.lightGreenAccent)
: color ==
Colors.green
? _accentList(Colors
.greenAccent)
: color ==
Colors
.teal
? _accentList(
Colors
.tealAccent)
: color ==
Colors
.cyan
? _accentList(Colors
.cyanAccent)
: color ==
Colors.lightBlue
? _accentList(Colors.lightBlueAccent)
: color == Colors.blue
? _accentList(Colors.blueAccent)
: color == Colors.indigo
? _accentList(Colors.indigoAccent)
: color == Colors.purple
? _accentList(Colors.purpleAccent)
: color == Colors.deepPurple
? _accentList(Colors.deepPurpleAccent)
: []
],
),
))
.toList(),
),
),
],
),
);
}
}