playing with sidesheet option

experimental/material_3_demo/lib/color_palettes_screen.dart

@@ -886,13 +886,13 @@ class ColorGroup extends StatelessWidget {
         child: small
             ? GridView.count(
                 crossAxisCount: axisCount,
-                crossAxisSpacing: 1,
+                crossAxisSpacing: 3,
                 shrinkWrap: true,
                 // childAspectRatio: children.length / 1,
                 // childAspectRatio: (4 / axisCount) * axisCount
 
                 // when 4 then 4, when 1 then 16
-                childAspectRatio: 16 / axisCount,
+                childAspectRatio: 1,
                 physics: const NeverScrollableScrollPhysics(),
                 children: children,
               )
@@ -934,6 +934,7 @@ class ColorChip extends StatelessWidget {
 
     return Container(
       decoration: BoxDecoration(
+        borderRadius: BorderRadius.circular(100),
         color: color,
         border: small
             ? Border.all(

experimental/material_3_demo/lib/home.dart

@@ -83,6 +83,33 @@ class Home extends StatefulWidget {
   State<Home> createState() => _HomeState();
 }
 
+class SideSheet extends StatelessWidget {
+  const SideSheet({
+    //
+    required this.handleColorRoleChange,
+    required this.lightColorScheme,
+    super.key,
+  });
+
+  final ConfigColorSchemeCallback handleColorRoleChange;
+  final ColorScheme lightColorScheme;
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      children: [
+        const Text("Color Scheme"),
+        ColorSchemeView(
+          small: true,
+          handleColorRoleChange: handleColorRoleChange,
+          colorScheme: lightColorScheme,
+          brightness: Brightness.light,
+        ),
+      ],
+    );
+  }
+}
+
 class _HomeState extends State<Home> with SingleTickerProviderStateMixin {
   final GlobalKey<ScaffoldState> scaffoldKey = GlobalKey<ScaffoldState>();
   late final AnimationController controller;
@@ -156,15 +183,31 @@ class _HomeState extends State<Home> with SingleTickerProviderStateMixin {
     switch (screenSelected) {
       case ScreenSelected.component:
         return Expanded(
-          child: OneTwoTransition(
-            animation: railAnimation,
-            one: FirstComponentList(
-                showNavBottomBar: showNavBarExample,
-                scaffoldKey: scaffoldKey,
-                showSecondList: showMediumSizeLayout || showLargeSizeLayout),
-            two: SecondComponentList(
-              scaffoldKey: scaffoldKey,
-            ),
+          child: Stack(
+            children: [
+              OneTwoTransition(
+                animation: railAnimation,
+                one: FirstComponentList(
+                    showNavBottomBar: showNavBarExample,
+                    scaffoldKey: scaffoldKey,
+                    showSecondList:
+                        showMediumSizeLayout || showLargeSizeLayout),
+                two: SecondComponentList(
+                  scaffoldKey: scaffoldKey,
+                ),
+              ),
+              Positioned(
+                right: 0,
+                child: Container(
+                  width: 250,
+                  color: Theme.of(context).colorScheme.surface,
+                  child: SideSheet(
+                    handleColorRoleChange: widget.handleColorRoleChange,
+                    lightColorScheme: widget.lightColors,
+                  ),
+                ),
+              )
+            ],
           ),
         );
       case ScreenSelected.color: