content: import 'package:flutter/material.dart';
  
  import '../../app/widgets/app/color_card.dart';
  
  /// Draw a number of boxes showing the colors of key theme color properties
  /// in the ColorScheme of the inherited ThemeData and its color properties.
  class ShowColorSchemeColors extends StatelessWidget {
    const ShowColorSchemeColors({super.key, this.onBackgroundColor});
  
    /// The color of the background the color widget are being drawn on.
    ///
    /// Some of the theme colors may have semi transparent fill color. To compute
    /// a legible text color for the sum when it shown on a background color, we
    /// need to alpha merge it with background and we need the exact background
    /// color it is drawn on for that. If not passed in from parent, it is
    /// assumed to be drawn on card color, which usually is close enough.
    final Color? onBackgroundColor;
  
    // Return true if the color is light, meaning it needs dark text for contrast.
    static bool _isLight(final Color color) =>
        ThemeData.estimateBrightnessForColor(color) == Brightness.light;
  
    // On color used when a theme color property does not have a theme onColor.
    static Color _onColor(final Color color, final Color bg) =>
        _isLight(Color.alphaBlend(color, bg)) ? Colors.black : Colors.white;
  
    @override
    Widget build(BuildContext context) {
      final ThemeData theme = Theme.of(context);
      final ColorScheme colorScheme = theme.colorScheme;
      final bool useMaterial3 = theme.useMaterial3;
      const double spacing = 4;
  
      // Grab the card border from the theme card shape
      ShapeBorder? border = theme.cardTheme.shape;
      // If we had one, copy in a border side to it.
      if (border is RoundedRectangleBorder) {
        border = border.copyWith(side: BorderSide(color: colorScheme.outlineVariant, width: 1));
        // If
      } else {
        // If border was null, make one matching Card default, but with border
        // side, if it was not null, we leave it as it was.
        border ??= RoundedRectangleBorder(
          borderRadius: BorderRadius.all(Radius.circular(useMaterial3 ? 12 : 4)),
          side: BorderSide(color: colorScheme.outlineVariant, width: 1),
        );
      }
  
      // Get effective background color.
      final Color background = onBackgroundColor ?? theme.cardTheme.color ?? theme.cardColor;
  
      // Wrap this widget branch in a custom theme where card has a border outline
      // if it did not have one, but retains its ambient themed border radius.
      return Theme(
        data: Theme.of(context).copyWith(
          cardTheme: CardTheme.of(
            context,
          ).copyWith(elevation: 0, surfaceTintColor: Colors.transparent, shape: border),
        ),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.symmetric(vertical: 8),
              child: Text('ColorScheme Colors', style: theme.textTheme.titleMedium),
            ),
            Wrap(
              alignment: WrapAlignment.start,
              crossAxisAlignment: WrapCrossAlignment.center,
              spacing: spacing,
              runSpacing: spacing,
              children: <Widget>[
                ColorCard(
                  label: 'Primary',
                  color: colorScheme.primary,
                  textColor: colorScheme.onPrimary,
                ),
                ColorCard(
                  label: 'on\nPrimary',
                  color: colorScheme.onPrimary,
                  textColor: colorScheme.primary,
                ),
                ColorCard(
                  label: 'Primary\nContainer',
                  color: colorScheme.primaryContainer,
                  textColor: colorScheme.onPrimaryContainer,
                ),
                ColorCard(
                  label: 'onPrimary\nContainer',
                  color: colorScheme.onPrimaryContainer,
                  textColor: colorScheme.primaryContainer,
                ),
                ColorCard(
                  label: 'Secondary',
                  color: colorScheme.secondary,
                  textColor: colorScheme.onSecondary,
                ),
                ColorCard(
                  label: 'on\nSecondary',
                  color: colorScheme.onSecondary,
                  textColor: colorScheme.secondary,
                ),
                ColorCard(
                  label: 'Secondary\nContainer',
                  color: colorScheme.secondaryContainer,
                  textColor: colorScheme.onSecondaryContainer,
                ),
                ColorCard(
                  label: 'on\nSecondary\nContainer',
                  color: colorScheme.onSecondaryContainer,
                  textColor: colorScheme.secondaryContainer,
                ),
                ColorCard(
                  label: 'Tertiary',
                  color: colorScheme.tertiary,
                  textColor: colorScheme.onTertiary,
                ),
                ColorCard(
                  label: 'on\nTertiary',
                  color: colorScheme.onTertiary,
                  textColor: colorScheme.tertiary,
                ),
                ColorCard(
                  label: 'Tertiary\nContainer',
                  color: colorScheme.tertiaryContainer,
                  textColor: colorScheme.onTertiaryContainer,
                ),
                ColorCard(
                  label: 'on\nTertiary\nContainer',
                  color: colorScheme.onTertiaryContainer,
                  textColor: colorScheme.tertiaryContainer,
                ),
                ColorCard(label: 'Error', color: colorScheme.error, textColor: colorScheme.onError),
                ColorCard(
                  label: 'on\nError',
                  color: colorScheme.onError,
                  textColor: colorScheme.error,
                ),
                ColorCard(
                  label: 'Error\nContainer',
                  color: colorScheme.errorContainer,
                  textColor: colorScheme.onErrorContainer,
                ),
                ColorCard(
                  label: 'onError\nContainer',
                  color: colorScheme.onErrorContainer,
                  textColor: colorScheme.errorContainer,
                ),
                ColorCard(
                  label: 'Surface',
                  color: colorScheme.surface,
                  textColor: colorScheme.onSurface,
                ),
                ColorCard(
                  label: 'on\nSurface',
                  color: colorScheme.onSurface,
                  textColor: colorScheme.surface,
                ),
                ColorCard(
                  label: 'onSurface\nVariant',
                  color: colorScheme.onSurfaceVariant,
                  textColor: colorScheme.surface,
                ),
                ColorCard(
                  label: 'Outline',
                  color: colorScheme.outline,
                  textColor: colorScheme.surface,
                ),
                ColorCard(
                  label: 'Outline\nVariant',
                  color: colorScheme.outlineVariant,
                  textColor: colorScheme.onSurface,
                ),
                ColorCard(
                  label: 'Shadow',
                  color: colorScheme.shadow,
                  textColor: _onColor(colorScheme.shadow, background),
                ),
                ColorCard(
                  label: 'Scrim',
                  color: colorScheme.scrim,
                  textColor: _onColor(colorScheme.scrim, background),
                ),
                ColorCard(
                  label: 'Inverse\nSurface',
                  color: colorScheme.inverseSurface,
                  textColor: colorScheme.onInverseSurface,
                ),
                ColorCard(
                  label: 'onInverse\nSurface',
                  color: colorScheme.onInverseSurface,
                  textColor: colorScheme.inverseSurface,
                ),
                ColorCard(
                  label: 'Inverse\nPrimary',
                  color: colorScheme.inversePrimary,
                  textColor: colorScheme.inverseSurface,
                ),
                ColorCard(
                  label: 'Surface\nTint',
                  color: colorScheme.surfaceTint,
                  textColor: colorScheme.onPrimary,
                ),
              ],
            ),
          ],
        ),
      );
    }
  }
  