From 0fb4fc1e4735e89c5bff27fa4f6ab6920df938ff Mon Sep 17 00:00:00 2001
From: Vadim <vadim.turko@gmail.com>
Date: Tue, 14 Mar 2023 11:57:01 +0100
Subject: [PATCH] Added edge cutouts to color picker

---
 .../widget_dialog_picker_primary_color.dart   | 109 +++++++++++++-----
 1 file changed, 83 insertions(+), 26 deletions(-)

diff --git a/lib/screens/settings/components/theme/components/primary_color/components/primary_color_picker_dialog/widget_dialog_picker_primary_color.dart b/lib/screens/settings/components/theme/components/primary_color/components/primary_color_picker_dialog/widget_dialog_picker_primary_color.dart
index 40655b5..e2e6b8e 100644
--- a/lib/screens/settings/components/theme/components/primary_color/components/primary_color_picker_dialog/widget_dialog_picker_primary_color.dart
+++ b/lib/screens/settings/components/theme/components/primary_color/components/primary_color_picker_dialog/widget_dialog_picker_primary_color.dart
@@ -27,34 +27,47 @@ class _PrimaryColorDialogPickerState extends State<PrimaryColorDialogPicker> {
       titlePadding: Dimens.dialogTitlePadding,
       title: Text(S.of(context).choosePrimaryColor),
       content: SizedBox(
-        height: Dimens.grid48,
-        width: double.maxFinite,
-        child: SingleChildScrollView(
-          controller: _scrollController,
-          scrollDirection: Axis.horizontal,
-          padding: EdgeInsets.zero,
-          child: Row(
-            children: List.generate(
-              ThemeProvider.primaryColorsList.length,
-              (index) {
-                final color = ThemeProvider.primaryColorsList[index];
-                return Padding(
-                  padding: EdgeInsets.only(left: index == 0 ? 0 : Dimens.paddingS),
-                  child: _SelectableColorItem(
-                    color: color,
-                    selected: color.value == _selected.value,
-                    onTap: () {
-                      setState(() {
-                        _selected = color;
-                      });
+          height: Dimens.grid48,
+          width: double.maxFinite,
+          child: Stack(
+            children: [
+              SingleChildScrollView(
+                controller: _scrollController,
+                scrollDirection: Axis.horizontal,
+                padding: EdgeInsets.zero,
+                child: Row(
+                  children: List.generate(
+                    ThemeProvider.primaryColorsList.length,
+                    (index) {
+                      final color = ThemeProvider.primaryColorsList[index];
+                      return Padding(
+                        padding: EdgeInsets.only(left: index == 0 ? 0 : Dimens.paddingS),
+                        child: _SelectableColorItem(
+                          color: color,
+                          selected: color.value == _selected.value,
+                          onTap: () {
+                            setState(() {
+                              _selected = color;
+                            });
+                          },
+                        ),
+                      );
                     },
                   ),
-                );
-              },
-            ),
-          ),
-        ),
-      ),
+                ),
+              ),
+              Row(
+                mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                children: const [
+                  _Cutout(),
+                  RotatedBox(
+                    quarterTurns: 2,
+                    child: _Cutout(),
+                  ),
+                ],
+              ),
+            ],
+          )),
       actionsPadding: Dimens.dialogActionsPadding,
       actions: [
         TextButton(
@@ -120,3 +133,47 @@ class _SelectableColorItemState extends State<_SelectableColorItem> {
     );
   }
 }
+
+class _Cutout extends StatelessWidget {
+  const _Cutout();
+
+  @override
+  Widget build(BuildContext context) {
+    return SizedBox(
+      height: Dimens.grid48,
+      width: Dimens.grid24,
+      child: ClipPath(
+        clipper: const _CutoutClipper(),
+        child: Material(
+          color: Theme.of(context).dialogTheme.backgroundColor,
+          surfaceTintColor: Theme.of(context).colorScheme.surfaceTint,
+          elevation: Theme.of(context).dialogTheme.elevation!,
+          shadowColor: Colors.transparent,
+        ),
+      ),
+    );
+  }
+}
+
+class _CutoutClipper extends CustomClipper<Path> {
+  const _CutoutClipper();
+
+  @override
+  Path getClip(Size size) {
+    final path = Path();
+    final radius = size.height / 2;
+    path.lineTo(radius, 0);
+    path.arcToPoint(
+      Offset(radius, size.height),
+      radius: Radius.circular(radius),
+      rotation: 180,
+      clockwise: false,
+    );
+    path.lineTo(0, size.height);
+    path.close();
+    return path;
+  }
+
+  @override
+  bool shouldReclip(CustomClipper oldClipper) => false;
+}