Improve color display in M3 Demo

material_3_demo/lib/color_box.dart

@@ -0,0 +1,94 @@
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+
+class ColorBox extends StatefulWidget {
+  const ColorBox({
+    super.key,
+    required this.label,
+    required this.tone,
+    required this.color,
+    required this.onColor,
+    required this.height,
+    required this.width,
+    this.displayPaletteInfo = false
+  });
+
+  final String label;
+  final String tone;
+  final Color color, onColor;
+  final double height, width;
+  final bool displayPaletteInfo;
+
+  @override
+  State<ColorBox> createState() => _ColorBoxState();
+}
+
+class _ColorBoxState extends State<ColorBox> {
+  bool hovered = false;
+
+  @override
+  Widget build(BuildContext context) {
+    final fonts = Theme.of(context).textTheme;
+    return MouseRegion(
+      onEnter: (_) {
+        if (mounted) setState(() => hovered = true);
+      },
+      onExit: (_) {
+        if (mounted) setState(() => hovered = false);
+      },
+      child: Container(
+        color: widget.color,
+        height: widget.height,
+        width: widget.width,
+        child: DefaultTextStyle(
+          style: fonts.labelSmall!.copyWith(color: widget.onColor),
+          child: Stack(
+            children: [
+              Positioned(
+                top: 10,
+                left: 10,
+                child: Text(widget.label),
+              ),
+              Positioned(
+                bottom: 10,
+                right: 10,
+                child: Text(widget.displayPaletteInfo ? widget.tone : ''),
+              ),
+              if (hovered)
+                Positioned(
+                  top: 0,
+                  right: 0,
+                  child: IconButton(
+                    padding: EdgeInsets.zero,
+                    color: widget.onColor,
+                    tooltip: 'Copy hex color',
+                    icon: const Icon(Icons.copy, size:24),
+                    onPressed: () async {
+                      final messenger = ScaffoldMessenger.of(context);
+                      // Copy color as hex to clipboard
+                      var hex = '#';
+                      final c = widget.color;
+                      // Will change from int 0-255 to double 0.0-1.0 in 3.26+
+                      // The properties also change from red/green/blue to r/g/b
+                      // hex += (c.[r g b] * 255.0).round().toRadixString(16).padLeft(2, '0');
+                      hex += c.red.toRadixString(16).padLeft(2, '0');
+                      hex += c.green.toRadixString(16).padLeft(2, '0');
+                      hex += c.blue.toRadixString(16).padLeft(2, '0');
+                      final data = ClipboardData(text: hex);
+                      await Clipboard.setData(data);
+                      messenger.hideCurrentSnackBar();
+                      messenger.showSnackBar(
+                        SnackBar(
+                          content: Text('Copied $hex to clipboard'),
+                        ),
+                      );
+                    },
+                  ),
+                ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}

material_3_demo/lib/color_palettes_screen.dart

@@ -4,14 +4,15 @@
 
 import 'package:flutter/gestures.dart';
 import 'package:flutter/material.dart';
+import 'package:material_3_demo/scheme.dart';
 import 'package:url_launcher/url_launcher.dart';
 
 const Widget divider = SizedBox(height: 10);
 
 // If screen content width is greater or equal to this value, the light and dark
 // color schemes will be displayed in a column. Otherwise, they will
 // be displayed in a row.
-const double narrowScreenWidthThreshold = 400;
+const double narrowScreenWidthThreshold = 500;
 
 class ColorPalettesScreen extends StatelessWidget {
   const ColorPalettesScreen({super.key});
@@ -94,32 +95,18 @@ class ColorPalettesScreen extends StatelessWidget {
               ),
             );
           } else {
+            var seed = Theme.of(context).colorScheme.primary;
+            var lightScheme = ColorScheme.fromSeed(seedColor: seed, brightness: Brightness.light);
+            var darkScheme = ColorScheme.fromSeed(seedColor: seed, brightness: Brightness.dark);
             return SingleChildScrollView(
               child: Padding(
-                padding: const EdgeInsets.only(top: 5),
+                padding: const EdgeInsets.all(8),
                 child: Column(
                   children: [
-                    dynamicColorNotice(),
-                    Row(
-                      children: [
-                        Expanded(
-                          child: Column(
-                            children: [
-                              schemeLabel('Light ColorScheme'),
-                              schemeView(lightTheme),
-                            ],
-                          ),
-                        ),
-                        Expanded(
-                          child: Column(
-                            children: [
-                              schemeLabel('Dark ColorScheme'),
-                              schemeView(darkTheme),
-                            ],
-                          ),
-                        ),
-                      ],
-                    ),
+                    SchemePreview(label:"Light ColorScheme", scheme: lightScheme,  brightness: Brightness.light, contrast: 1.0,  colorMatch: false,),
+                    const SizedBox(height:16),
+                    SchemePreview(label:"Dark ColorScheme", scheme: darkScheme,  brightness: Brightness.dark, contrast: 1.0,  colorMatch: false,),
+                    const SizedBox(height:16),
                   ],
                 ),
               ),