Make color selection UI screen size adaptive (#187)

ubuntu · Jun 29, 2022 · 41c8619 · 41c8619
1 parent 57606ac
commit 41c8619
Showing 1 changed file with 34 additions and 14 deletions.
diff --git a/example/lib/view/home_page.dart b/example/lib/view/home_page.dart
@@ -61,21 +61,41 @@ class _HomePageState extends State<HomePage> {
           ),
         ),
         actions: [
-          ColorDisk(
-              color: theme.themeMode == ThemeMode.light
-                  ? Colors.black
-                  : Colors.white,
-              selected: theme.highContrast == true,
-              onPressed: () => AppTheme.apply(context, highContrast: true)),
-          for (final variant in YaruVariant.values.take(10)) // skip flavors
-            ColorDisk(
-              color: variant.color,
-              selected: variant == theme.variant && theme.highContrast != true,
-              onPressed: () => AppTheme.apply(context,
-                  variant: variant, highContrast: false),
+          PopupMenuButton<Color>(
+            onSelected: (value) {},
+            child: SizedBox(
+              width: 40,
+              child: Icon(
+                Icons.color_lens,
+                color: Theme.of(context).primaryColor,
+              ),
             ),
-          SizedBox(
-            width: 20,
+            itemBuilder: (context) {
+              return [
+                PopupMenuItem(
+                  onTap: () => AppTheme.apply(context, highContrast: true),
+                  child: ColorDisk(
+                    color: theme.themeMode == ThemeMode.light
+                        ? Colors.black
+                        : Colors.white,
+                    selected: theme.highContrast == true,
+                    onPressed: () {},
+                  ),
+                ),
+                for (final variant
+                    in YaruVariant.values.take(10)) // skip flavors
+                  PopupMenuItem(
+                    onTap: () => AppTheme.apply(context,
+                        variant: variant, highContrast: false),
+                    child: ColorDisk(
+                      color: variant.color,
+                      selected: variant == theme.variant &&
+                          theme.highContrast != true,
+                      onPressed: () {},
+                    ),
+                  )
+              ];
+            },
           ),
         ],
       ),