opt color select

Signed-off-by: bggRGjQaUbCoE <githubaccount56556@proton.me>

lib/common/widgets/color_palette.dart

@@ -0,0 +1,76 @@
+import 'package:flutter/material.dart';
+import 'package:material_color_utilities/material_color_utilities.dart';
+
+class ColorPalette extends StatelessWidget {
+  final Color color;
+  final bool selected;
+
+  const ColorPalette({
+    super.key,
+    required this.color,
+    required this.selected,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final theme = Theme.of(context);
+    final Hct hct = Hct.fromInt(color.value);
+    final primary = Color(Hct.from(hct.hue, 20.0, 90.0).toInt());
+    final tertiary = Color(Hct.from(hct.hue + 50, 20.0, 85.0).toInt());
+    final primaryContainer = Color(Hct.from(hct.hue, 30.0, 50.0).toInt());
+    final checkbox = Color(Hct.from(hct.hue, 30.0, 40.0).toInt());
+    Widget coloredBox(Color color) => Expanded(
+          child: ColoredBox(
+            color: color,
+            child: const SizedBox.expand(),
+          ),
+        );
+    Widget child = ClipOval(
+      child: Column(
+        children: [
+          coloredBox(primary),
+          Expanded(
+            child: Row(
+              children: [
+                coloredBox(tertiary),
+                coloredBox(primaryContainer),
+              ],
+            ),
+          ),
+        ],
+      ),
+    );
+    if (selected) {
+      child = Stack(
+        clipBehavior: Clip.none,
+        alignment: Alignment.center,
+        children: [
+          child,
+          Container(
+            width: 23,
+            height: 23,
+            decoration: BoxDecoration(
+              color: checkbox,
+              shape: BoxShape.circle,
+            ),
+            child: Icon(
+              Icons.check_rounded,
+              color: primary,
+              size: 12,
+            ),
+          ),
+        ],
+      );
+    }
+    return Container(
+      width: 50,
+      height: 50,
+      padding: const EdgeInsets.all(6),
+      decoration: BoxDecoration(
+        color: theme.colorScheme.onInverseSurface,
+        borderRadius: const BorderRadius.all(Radius.circular(10)),
+      ),
+      child: child,
+    );
+  }
+}

lib/pages/setting/pages/color_select.dart

@@ -1,3 +1,4 @@
+import 'package:PiliPlus/common/widgets/color_palette.dart';
 import 'package:PiliPlus/models/common/nav_bar_config.dart';
 import 'package:PiliPlus/models/common/theme/theme_color_type.dart';
 import 'package:PiliPlus/models/common/theme/theme_type.dart';
@@ -180,8 +181,7 @@ class _ColorSelectPageState extends State<ColorSelectPage> {
                 () => SizedBox(
                   height: ctr.type.value == 0 ? 0 : null,
                   child: Padding(
-                    padding:
-                        const EdgeInsets.only(top: 12, left: 12, right: 12),
+                    padding: const EdgeInsets.all(12),
                     child: Wrap(
                       alignment: WrapAlignment.center,
                       spacing: 22,
@@ -201,29 +201,9 @@ class _ColorSelectPageState extends State<ColorSelectPage> {
                             child: Column(
                               spacing: 3,
                               children: [
-                                Container(
-                                  width: 46,
-                                  height: 46,
-                                  decoration: BoxDecoration(
-                                    shape: BoxShape.circle,
-                                    color: item.color.withValues(alpha: 0.8),
-                                    border: Border.all(
-                                      width: 2,
-                                      color: ctr.currentColor.value == index
-                                          ? Colors.black
-                                          : item.color.withValues(alpha: 0.8),
-                                    ),
-                                  ),
-                                  child: AnimatedOpacity(
-                                    opacity:
-                                        ctr.currentColor.value == index ? 1 : 0,
-                                    duration: const Duration(milliseconds: 200),
-                                    child: const Icon(
-                                      Icons.done,
-                                      color: Colors.black,
-                                      size: 20,
-                                    ),
-                                  ),
+                                ColorPalette(
+                                  color: item.color,
+                                  selected: ctr.currentColor.value == index,
                                 ),
                                 Text(
                                   item.label,

pubspec.lock

@@ -1145,7 +1145,7 @@ packages:
     source: hosted
     version: "0.12.17"
   material_color_utilities:
-    dependency: transitive
+    dependency: "direct main"
     description:
       name: material_color_utilities
       sha256: f7142bb1154231d7ea5f96bc7bde4bda2a0945d2806bb11670e30b850d56bdec

pubspec.yaml

@@ -210,6 +210,7 @@ dependencies:
   universal_platform: any
   path: any
   collection: any
+  material_color_utilities: any
 
 dependency_overrides:
   screen_brightness: ^2.0.1