flutter: settings: Enhance experience of picking color

src/ui/flutter_app/lib/l10n/intl_en.arb

@@ -48,6 +48,10 @@
   "@ok": {
     "description": "OK"
   },
+  "confirm": "Confirm",
+  "@confirm": {
+    "description": "Confirm"
+  },
   "cancel": "Cancel",
   "@cancel": {
     "description": "Cancel"
@@ -463,5 +467,9 @@
   "exitApp": "The App will exit.",
   "@exitApp": {
     "description": "The App will exit."
+  },
+  "pick": "Pick",
+  "@pick": {
+    "description": "Pick "
   }
 }

src/ui/flutter_app/lib/l10n/intl_zh.arb

@@ -12,6 +12,7 @@
   "gameRecord": "棋谱",
   "noGameRecord": "暂无招法",
   "ok": "好的",
+  "confirm": "确认",
   "cancel": "取消",
   "daSanQi": "打三棋",
   "copyright": "版权所有 © 2021 Calcitem Studio",
@@ -115,5 +116,6 @@
   "boardInnerLineWidth": "棋盘内部线宽",
   "restore": "重置",
   "restoreDefaultSettings": "恢复默认设置",
-  "exitApp": "App 将退出。"
+  "exitApp": "App 将退出。",
+  "pick": "选择"
 }

src/ui/flutter_app/lib/widgets/game_settings_page.dart

@@ -32,8 +32,8 @@ class GameSettingsPage extends StatefulWidget {
 
 class _GameSettingsPageState extends State<GameSettingsPage> {
   // create some values
-  Color pickerColor = Color(0xff443a49);
-  Color currentColor = Color(0xff443a49);
+  Color pickerColor = Color(0xFF808080);
+  Color currentColor = Color(0xFF808080);
 
   @override
   void initState() {
@@ -47,10 +47,10 @@ class _GameSettingsPageState extends State<GameSettingsPage> {
 
   showBoardColorDialog() async {
     AlertDialog alert = AlertDialog(
-      title: const Text('Pick a color!'),
+      title: Text(S.of(context).pick + S.of(context).boardColor),
       content: SingleChildScrollView(
         child: ColorPicker(
-          pickerColor: pickerColor,
+          pickerColor: Color(Config.boardBackgroundColor),
           onColorChanged: changeColor,
           showLabel: true,
           //pickerAreaHeightPercent: 0.8,
@@ -58,7 +58,7 @@ class _GameSettingsPageState extends State<GameSettingsPage> {
       ),
       actions: <Widget>[
         TextButton(
-          child: const Text('Confirm'),
+          child: Text(S.of(context).confirm),
           onPressed: () {
             setState(() => currentColor = pickerColor);
             Config.boardBackgroundColor = pickerColor.value;
@@ -66,6 +66,12 @@ class _GameSettingsPageState extends State<GameSettingsPage> {
             Navigator.of(context).pop();
           },
         ),
+        TextButton(
+          child: Text(S.of(context).cancel),
+          onPressed: () {
+            Navigator.of(context).pop();
+          },
+        ),
       ],
     );
 
@@ -80,10 +86,10 @@ class _GameSettingsPageState extends State<GameSettingsPage> {
 
   showBackgroundColorDialog() async {
     AlertDialog alert = AlertDialog(
-      title: const Text('Pick a color!'),
+      title: Text(S.of(context).pick + S.of(context).backgroudColor),
       content: SingleChildScrollView(
         child: ColorPicker(
-          pickerColor: pickerColor,
+          pickerColor: Color(Config.darkBackgroundColor),
           onColorChanged: changeColor,
           showLabel: true,
           //pickerAreaHeightPercent: 0.8,
@@ -91,7 +97,7 @@ class _GameSettingsPageState extends State<GameSettingsPage> {
       ),
       actions: <Widget>[
         TextButton(
-          child: const Text('Confirm'),
+          child: Text(S.of(context).confirm),
           onPressed: () {
             setState(() => currentColor = pickerColor);
             Config.darkBackgroundColor = pickerColor.value;
@@ -99,6 +105,12 @@ class _GameSettingsPageState extends State<GameSettingsPage> {
             Navigator.of(context).pop();
           },
         ),
+        TextButton(
+          child: Text(S.of(context).cancel),
+          onPressed: () {
+            Navigator.of(context).pop();
+          },
+        ),
       ],
     );
 
@@ -113,10 +125,10 @@ class _GameSettingsPageState extends State<GameSettingsPage> {
 
   showBoardLineColorDialog() async {
     AlertDialog alert = AlertDialog(
-      title: const Text('Pick a color!'),
+      title: Text(S.of(context).pick + S.of(context).lineColor),
       content: SingleChildScrollView(
         child: ColorPicker(
-          pickerColor: pickerColor,
+          pickerColor: Color(Config.boardLineColor),
           onColorChanged: changeColor,
           showLabel: true,
           //pickerAreaHeightPercent: 0.8,
@@ -124,7 +136,7 @@ class _GameSettingsPageState extends State<GameSettingsPage> {
       ),
       actions: <Widget>[
         TextButton(
-          child: const Text('Confirm'),
+          child: Text(S.of(context).confirm),
           onPressed: () {
             setState(() => currentColor = pickerColor);
             Config.boardLineColor = pickerColor.value;
@@ -132,6 +144,12 @@ class _GameSettingsPageState extends State<GameSettingsPage> {
             Navigator.of(context).pop();
           },
         ),
+        TextButton(
+          child: Text(S.of(context).cancel),
+          onPressed: () {
+            Navigator.of(context).pop();
+          },
+        ),
       ],
     );