From 63a286056cc5e023d12e9bf531a3153201c2d225 Mon Sep 17 00:00:00 2001 From: bggRGjQaUbCoE Date: Mon, 9 Jun 2025 12:30:52 +0800 Subject: [PATCH] opt color select Signed-off-by: bggRGjQaUbCoE --- lib/common/widgets/color_palette.dart | 76 +++++++++++++++++++++++ lib/pages/setting/pages/color_select.dart | 30 ++------- pubspec.lock | 2 +- pubspec.yaml | 1 + 4 files changed, 83 insertions(+), 26 deletions(-) create mode 100644 lib/common/widgets/color_palette.dart diff --git a/lib/common/widgets/color_palette.dart b/lib/common/widgets/color_palette.dart new file mode 100644 index 00000000..33b0884a --- /dev/null +++ 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, + ); + } +} diff --git a/lib/pages/setting/pages/color_select.dart b/lib/pages/setting/pages/color_select.dart index fbf45530..9d5dc7c7 100644 --- a/lib/pages/setting/pages/color_select.dart +++ b/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 { () => 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 { 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, diff --git a/pubspec.lock b/pubspec.lock index 3d150922..51d5aa9d 100644 --- a/pubspec.lock +++ b/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 diff --git a/pubspec.yaml b/pubspec.yaml index df229274..f5487e6e 100644 --- a/pubspec.yaml +++ b/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