opt color select

Signed-off-by: bggRGjQaUbCoE <githubaccount56556@proton.me>
2025-12-26 12:07:11 +08:00 · 2025-06-09 12:30:52 +08:00
parent dc9b345e99
commit 63a286056c
4 changed files with 83 additions and 26 deletions
--- a/lib/common/widgets/color_palette.dart
+++ b/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,
+    );
+  }
+}