organ
/
Sanmill
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

flutter: Add personalization settings page

This commit is contained in:
Calcitem 2021-04-03 13:01:38 +08:00
parent 35d79c541c
commit a0884c80ca
6 changed files with 287 additions and 192 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/ui/flutter_app/lib/l10n/intl_en.arb
View File

@ -744,4 +744,9 @@
"@timeout": {
"description": "Timeout"
}
,
"personalization": "Personalization",
"@personalization": {
"description": "Personalization"
}
}

3
src/ui/flutter_app/lib/l10n/intl_zh.arb
View File

@ -185,5 +185,6 @@
"aisPlayStyle": "机器的棋风",
"passive": "消极被动",
"automaticBehavior": "自动行为",
"timeout": "超时"
"timeout": "超时",
"personalization": "外观设置"
}

191
src/ui/flutter_app/lib/widgets/game_settings_page.dart
View File

@ -19,7 +19,6 @@
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:flutter_colorpicker/flutter_colorpicker.dart';
import 'package:sanmill/common/config.dart';
import 'package:sanmill/common/settings.dart';
import 'package:sanmill/generated/l10n.dart';
@ -46,69 +45,6 @@ class _GameSettingsPageState extends State<GameSettingsPage> {
super.initState();
}
// ValueChanged<Color> callback
void changeColor(Color color) {
setState(() => pickerColor = color);
}
showColorDialog(String colorString) async {
Map<String, int> colorStrToVal = {
S.of(context).boardColor: Config.boardBackgroundColor,
S.of(context).backgroudColor: Config.darkBackgroundColor,
S.of(context).lineColor: Config.boardLineColor,
S.of(context).blackPieceColor: Config.blackPieceColor,
S.of(context).whitePieceColor: Config.whitePieceColor,
};
AlertDialog alert = AlertDialog(
title: Text(S.of(context).pick + colorString),
content: SingleChildScrollView(
child: ColorPicker(
pickerColor: Color(colorStrToVal[colorString]!),
onColorChanged: changeColor,
showLabel: true,
),
),
actions: <Widget>[
TextButton(
child: Text(S.of(context).confirm),
onPressed: () {
setState(() => currentColor = pickerColor);
if (colorString == S.of(context).boardColor) {
Config.boardBackgroundColor = pickerColor.value;
} else if (colorString == S.of(context).backgroudColor) {
Config.darkBackgroundColor = pickerColor.value;
} else if (colorString == S.of(context).lineColor) {
Config.boardLineColor = pickerColor.value;
} else if (colorString == S.of(context).blackPieceColor) {
Config.blackPieceColor = pickerColor.value;
} else if (colorString == S.of(context).whitePieceColor) {
Config.whitePieceColor = pickerColor.value;
}
Config.save();
Navigator.of(context).pop();
},
),
TextButton(
child: Text(S.of(context).cancel),
onPressed: () {
Navigator.of(context).pop();
},
),
],
);
// show the dialog
showDialog(
context: context,
builder: (BuildContext context) {
return alert;
},
);
}
SliderTheme _skillLevelSliderTheme(context, setState) {
return SliderTheme(
data: AppTheme.sliderThemeData,
@ -129,68 +65,6 @@ class _GameSettingsPageState extends State<GameSettingsPage> {
);
}
SliderTheme _boardBorderLineWidthSliderTheme(context, setState) {
return SliderTheme(
data: AppTheme.sliderThemeData,
child: Slider(
value: Config.boardBorderLineWidth.toDouble(),
min: 0.0,
max: 20.0,
divisions: 200,
label: Config.boardBorderLineWidth.toStringAsFixed(1),
onChanged: (value) {
setState(() {
print("BoardBorderLineWidth value: $value");
Config.boardBorderLineWidth = value;
Config.save();
});
},
),
);
}
setBoardBorderLineWidth() async {
showModalBottomSheet(
context: context,
builder: (BuildContext context) => StatefulBuilder(
builder: (context, setState) {
return _boardBorderLineWidthSliderTheme(context, setState);
},
),
);
}
SliderTheme _boardInnerLineWidthSliderTheme(context, setState) {
return SliderTheme(
data: AppTheme.sliderThemeData,
child: Slider(
value: Config.boardInnerLineWidth.toDouble(),
min: 0.0,
max: 20.0,
divisions: 200,
label: Config.boardInnerLineWidth.toStringAsFixed(1),
onChanged: (value) {
setState(() {
print("BoardInnerLineWidth value: $value");
Config.boardInnerLineWidth = value;
Config.save();
});
},
),
);
}
setBoardInnerLineWidth() async {
showModalBottomSheet(
context: context,
builder: (BuildContext context) => StatefulBuilder(
builder: (context, setState) {
return _boardInnerLineWidthSliderTheme(context, setState);
},
),
);
}
// Restore
restoreFactoryDefaultSettings() async {
@ -316,71 +190,6 @@ class _GameSettingsPageState extends State<GameSettingsPage> {
],
),
AppTheme.sizedBox,
Text(S.of(context).display, style: AppTheme.settingsHeaderStyle),
SettingsCard(
context: context,
children: <Widget>[
SettingsSwitchListTile(
context: context,
value: Config.isPieceCountInHandShown,
onChanged: setIsPieceCountInHandShown,
titleString: S.of(context).isPieceCountInHandShown,
),
ListItemDivider(),
SettingsListTile(
context: context,
titleString: S.of(context).boardBorderLineWidth,
onTap: setBoardBorderLineWidth),
ListItemDivider(),
SettingsListTile(
context: context,
titleString: S.of(context).boardInnerLineWidth,
onTap: setBoardInnerLineWidth,
),
],
),
AppTheme.sizedBox,
Text(S.of(context).color, style: AppTheme.settingsHeaderStyle),
SettingsCard(
context: context,
children: <Widget>[
SettingsListTile(
context: context,
titleString: S.of(context).boardColor,
trailingColor: Config.boardBackgroundColor,
onTap: () => showColorDialog(S.of(context).boardColor),
),
ListItemDivider(),
SettingsListTile(
context: context,
titleString: S.of(context).backgroudColor,
trailingColor: Config.darkBackgroundColor,
onTap: () => showColorDialog(S.of(context).backgroudColor),
),
ListItemDivider(),
SettingsListTile(
context: context,
titleString: S.of(context).lineColor,
trailingColor: Config.boardLineColor,
onTap: () => showColorDialog(S.of(context).lineColor),
),
ListItemDivider(),
SettingsListTile(
context: context,
titleString: S.of(context).blackPieceColor,
trailingColor: Config.blackPieceColor,
onTap: () => showColorDialog(S.of(context).blackPieceColor),
),
ListItemDivider(),
SettingsListTile(
context: context,
titleString: S.of(context).whitePieceColor,
trailingColor: Config.whitePieceColor,
onTap: () => showColorDialog(S.of(context).whitePieceColor),
),
],
),
AppTheme.sizedBox,
Text(S.of(context).restore, style: AppTheme.settingsHeaderStyle),
SettingsCard(
context: context,

6
src/ui/flutter_app/lib/widgets/home_drawer.dart
View File

@ -56,6 +56,11 @@ class _HomeDrawerState extends State<HomeDrawer> {
labelName: S.of(context).ruleSettings,
icon: Icon(Icons.rule),
),
DrawerList(
index: DrawerIndex.personalization,
labelName: S.of(context).personalization,
icon: Icon(Icons.color_lens),
),
DrawerList(
index: DrawerIndex.Help,
labelName: S.of(context).help,
@ -331,6 +336,7 @@ enum DrawerIndex {
aiVsAi,
settings,
ruleSettings,
personalization,
Help,
About
}

5
src/ui/flutter_app/lib/widgets/navigation_home_screen.dart
View File

@ -10,6 +10,7 @@ import 'package:sanmill/widgets/home_drawer.dart';
import 'game_page.dart';
import 'game_settings_page.dart';
import 'rule_settings_page.dart';
import 'personalization_settings_page.dart';
class NavigationHomeScreen extends StatefulWidget {
@override
@ -81,6 +82,10 @@ class _NavigationHomeScreenState extends State<NavigationHomeScreen> {
setState(() {
screenView = RuleSettingsPage();
});
} else if (drawerIndex == DrawerIndex.personalization) {
setState(() {
screenView = PersonalizationSettingsPage();
});
} else if (drawerIndex == DrawerIndex.Help) {
setState(() {
screenView = HelpScreen();

269
src/ui/flutter_app/lib/widgets/personalization_settings_page.dart Normal file
View File

@ -0,0 +1,269 @@
/*
This file is part of Sanmill.
Copyright (C) 2019-2021 The Sanmill developers (see AUTHORS file)
Sanmill is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
Sanmill is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
import 'package:flutter/material.dart';
import 'package:flutter_colorpicker/flutter_colorpicker.dart';
import 'package:sanmill/common/config.dart';
import 'package:sanmill/generated/l10n.dart';
import 'package:sanmill/style/app_theme.dart';
import 'package:sanmill/style/colors.dart';
import 'package:sanmill/widgets/settings_card.dart';
import 'package:sanmill/widgets/settings_list_tile.dart';
import 'package:sanmill/widgets/settings_switch_list_tile.dart';
import 'list_item_divider.dart';
class PersonalizationSettingsPage extends StatefulWidget {
@override
_PersonalizationSettingsPageState createState() =>
_PersonalizationSettingsPageState();
}
class _PersonalizationSettingsPageState
extends State<PersonalizationSettingsPage> {
// create some values
Color pickerColor = Color(0xFF808080);
Color currentColor = Color(0xFF808080);
@override
void initState() {
super.initState();
}
// ValueChanged<Color> callback
void changeColor(Color color) {
setState(() => pickerColor = color);
}
showColorDialog(String colorString) async {
Map<String, int> colorStrToVal = {
S.of(context).boardColor: Config.boardBackgroundColor,
S.of(context).backgroudColor: Config.darkBackgroundColor,
S.of(context).lineColor: Config.boardLineColor,
S.of(context).blackPieceColor: Config.blackPieceColor,
S.of(context).whitePieceColor: Config.whitePieceColor,
};
AlertDialog alert = AlertDialog(
title: Text(S.of(context).pick + colorString),
content: SingleChildScrollView(
child: ColorPicker(
pickerColor: Color(colorStrToVal[colorString]!),
onColorChanged: changeColor,
showLabel: true,
),
),
actions: <Widget>[
TextButton(
child: Text(S.of(context).confirm),
onPressed: () {
setState(() => currentColor = pickerColor);
if (colorString == S.of(context).boardColor) {
Config.boardBackgroundColor = pickerColor.value;
} else if (colorString == S.of(context).backgroudColor) {
Config.darkBackgroundColor = pickerColor.value;
} else if (colorString == S.of(context).lineColor) {
Config.boardLineColor = pickerColor.value;
} else if (colorString == S.of(context).blackPieceColor) {
Config.blackPieceColor = pickerColor.value;
} else if (colorString == S.of(context).whitePieceColor) {
Config.whitePieceColor = pickerColor.value;
}
Config.save();
Navigator.of(context).pop();
},
),
TextButton(
child: Text(S.of(context).cancel),
onPressed: () {
Navigator.of(context).pop();
},
),
],
);
// show the dialog
showDialog(
context: context,
builder: (BuildContext context) {
return alert;
},
);
}
SliderTheme _boardBorderLineWidthSliderTheme(context, setState) {
return SliderTheme(
data: AppTheme.sliderThemeData,
child: Slider(
value: Config.boardBorderLineWidth.toDouble(),
min: 0.0,
max: 20.0,
divisions: 200,
label: Config.boardBorderLineWidth.toStringAsFixed(1),
onChanged: (value) {
setState(() {
print("BoardBorderLineWidth value: $value");
Config.boardBorderLineWidth = value;
Config.save();
});
},
),
);
}
setBoardBorderLineWidth() async {
showModalBottomSheet(
context: context,
builder: (BuildContext context) => StatefulBuilder(
builder: (context, setState) {
return _boardBorderLineWidthSliderTheme(context, setState);
},
),
);
}
SliderTheme _boardInnerLineWidthSliderTheme(context, setState) {
return SliderTheme(
data: AppTheme.sliderThemeData,
child: Slider(
value: Config.boardInnerLineWidth.toDouble(),
min: 0.0,
max: 20.0,
divisions: 200,
label: Config.boardInnerLineWidth.toStringAsFixed(1),
onChanged: (value) {
setState(() {
print("BoardInnerLineWidth value: $value");
Config.boardInnerLineWidth = value;
Config.save();
});
},
),
);
}
setBoardInnerLineWidth() async {
showModalBottomSheet(
context: context,
builder: (BuildContext context) => StatefulBuilder(
builder: (context, setState) {
return _boardInnerLineWidthSliderTheme(context, setState);
},
),
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: UIColors.lightBackgroundColor,
appBar: AppBar(
centerTitle: true,
title: Text(S.of(context).personalization),
backgroundColor: UIColors.primaryColor),
body: SingleChildScrollView(
padding: const EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: children(context),
),
),
);
}
List<Widget> children(BuildContext context) {
return <Widget>[
Text(S.of(context).display, style: AppTheme.settingsHeaderStyle),
SettingsCard(
context: context,
children: <Widget>[
SettingsSwitchListTile(
context: context,
value: Config.isPieceCountInHandShown,
onChanged: setIsPieceCountInHandShown,
titleString: S.of(context).isPieceCountInHandShown,
),
ListItemDivider(),
SettingsListTile(
context: context,
titleString: S.of(context).boardBorderLineWidth,
onTap: setBoardBorderLineWidth),
ListItemDivider(),
SettingsListTile(
context: context,
titleString: S.of(context).boardInnerLineWidth,
onTap: setBoardInnerLineWidth,
),
],
),
AppTheme.sizedBox,
Text(S.of(context).color, style: AppTheme.settingsHeaderStyle),
SettingsCard(
context: context,
children: <Widget>[
SettingsListTile(
context: context,
titleString: S.of(context).boardColor,
trailingColor: Config.boardBackgroundColor,
onTap: () => showColorDialog(S.of(context).boardColor),
),
ListItemDivider(),
SettingsListTile(
context: context,
titleString: S.of(context).backgroudColor,
trailingColor: Config.darkBackgroundColor,
onTap: () => showColorDialog(S.of(context).backgroudColor),
),
ListItemDivider(),
SettingsListTile(
context: context,
titleString: S.of(context).lineColor,
trailingColor: Config.boardLineColor,
onTap: () => showColorDialog(S.of(context).lineColor),
),
ListItemDivider(),
SettingsListTile(
context: context,
titleString: S.of(context).blackPieceColor,
trailingColor: Config.blackPieceColor,
onTap: () => showColorDialog(S.of(context).blackPieceColor),
),
ListItemDivider(),
SettingsListTile(
context: context,
titleString: S.of(context).whitePieceColor,
trailingColor: Config.whitePieceColor,
onTap: () => showColorDialog(S.of(context).whitePieceColor),
),
],
),
];
}
// Display
setIsPieceCountInHandShown(bool value) async {
setState(() {
Config.isPieceCountInHandShown = value;
});
Config.save();
}
}