// Copyright 2024 The Flutter team. All rights reserved. // Use of this source code is governed by a BSD-style license that can be // found in the LICENSE file. import 'package:flutter/material.dart'; import '../color_box.dart'; class SchemePreview extends StatefulWidget { const SchemePreview({ super.key, required this.label, required this.scheme, required this.brightness, required this.colorMatch, required this.contrast, }); final String label; final ColorScheme scheme; final Brightness brightness; final bool colorMatch; final double contrast; @override State createState() => _SchemePreviewState(); } class _SchemePreviewState extends State { @override Widget build(BuildContext context) { final theme = Theme.of(context); final fonts = theme.textTheme; final colors = theme.colorScheme; final dark = widget.brightness == Brightness.dark; final scheme = widget.scheme; return Theme( data: theme.copyWith(colorScheme: scheme), child: FittedBox( fit: BoxFit.fitWidth, child: Container( width: 902, decoration: BoxDecoration( color: scheme.surface, borderRadius: BorderRadius.circular(12), border: Border.all( color: theme.brightness == widget.brightness ? colors.outlineVariant : Colors.transparent, ), ), padding: const EdgeInsets.only( top: 16, left: 16, right: 16, ), child: Column( mainAxisSize: MainAxisSize.min, mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.start, children: [ Row( children: [ Expanded( child: Text( widget.label, style: fonts.titleMedium!.copyWith( color: scheme.onSurface, fontWeight: FontWeight.bold, ), textAlign: TextAlign.start, ), ), ], ), const SizedBox(height: 20), Row( mainAxisSize: MainAxisSize.min, mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.start, children: [ Column( mainAxisSize: MainAxisSize.min, children: [ Row( mainAxisSize: MainAxisSize.min, children: [ Column( mainAxisSize: MainAxisSize.min, children: [ ColorBox( label: 'Primary', tone: dark ? 'P-80' : 'P-40', color: scheme.primary, onColor: scheme.onPrimary, height: 87, width: 208, ), ColorBox( label: 'On Primary', tone: dark ? 'P-20' : 'P-100', color: scheme.onPrimary, onColor: scheme.primary, height: 40, width: 208, ), const SizedBox(height: 5), ColorBox( label: 'Primary Container', tone: dark ? 'P-30' : 'P-90', color: scheme.primaryContainer, onColor: scheme.onPrimaryContainer, height: 87, width: 208, ), ColorBox( label: 'On Primary Container', tone: dark ? 'P-90' : 'P-10', color: scheme.onPrimaryContainer, onColor: scheme.primaryContainer, height: 40, width: 208, ), ], ), const SizedBox(width: 5), Column( mainAxisSize: MainAxisSize.min, children: [ ColorBox( label: 'Secondary', tone: dark ? 'S-80' : 'S-40', color: scheme.secondary, onColor: scheme.onSecondary, height: 87, width: 208, ), ColorBox( label: 'On Secondary', tone: dark ? 'S-20' : 'S-100', color: scheme.onSecondary, onColor: scheme.secondary, height: 40, width: 208, ), const SizedBox(height: 5), ColorBox( label: 'Secondary Container', tone: dark ? 'S-30' : 'S-90', color: scheme.secondaryContainer, onColor: scheme.onSecondaryContainer, height: 87, width: 208, ), ColorBox( label: 'On Secondary Container', tone: dark ? 'S-90' : 'S-10', color: scheme.onSecondaryContainer, onColor: scheme.secondaryContainer, height: 40, width: 208, ), ], ), const SizedBox(width: 5), Column( mainAxisSize: MainAxisSize.min, children: [ ColorBox( label: 'Tertiary', tone: dark ? 'T-80' : 'T-40', color: scheme.tertiary, onColor: scheme.onTertiary, height: 87, width: 208, ), ColorBox( label: 'On Tertiary', tone: dark ? 'T-20' : 'T-100', color: scheme.onTertiary, onColor: scheme.tertiary, height: 40, width: 208, ), const SizedBox(height: 5), ColorBox( label: 'Tertiary Container', tone: dark ? 'T-30' : 'T-90', color: scheme.tertiaryContainer, onColor: scheme.onTertiaryContainer, height: 87, width: 208, ), ColorBox( label: 'On Tertiary Container', tone: dark ? 'T-90' : 'T-10', color: scheme.onTertiaryContainer, onColor: scheme.tertiaryContainer, height: 40, width: 208, ), ], ), ], ), const SizedBox(height: 20), Row( mainAxisSize: MainAxisSize.min, children: [ ColorBox( label: 'Surface Dim', tone: dark ? 'N-6' : 'N-87', color: scheme.surfaceDim, onColor: scheme.onSurface, height: 105, width: 211.45, ), ColorBox( label: 'Surface', tone: dark ? 'N-6' : 'N-98', color: scheme.surface, onColor: scheme.onSurface, height: 105, width: 211.45, ), ColorBox( label: 'Surface Bright', tone: dark ? 'N-24' : 'N-98', color: scheme.surfaceBright, onColor: scheme.onSurface, height: 105, width: 211.45, ), ], ), const SizedBox(height: 5), Row( mainAxisSize: MainAxisSize.min, children: [ ColorBox( label: 'Surf. Container\nLowest', tone: dark ? 'N-4' : 'N-100', color: scheme.surfaceContainerLowest, onColor: scheme.onSurface, height: 105, width: 126.87, ), ColorBox( label: 'Surf. Container\nLow', tone: dark ? 'N-10' : 'N-96', color: scheme.surfaceContainerLow, onColor: scheme.onSurface, height: 105, width: 126.87, ), ColorBox( label: 'Surf. Container', tone: dark ? 'N-12' : 'N-94', color: scheme.surfaceContainer, onColor: scheme.onSurface, height: 105, width: 126.87, ), ColorBox( label: 'Surf. Container\nHigh', tone: dark ? 'N-17' : 'N-92', color: scheme.surfaceContainerHigh, onColor: scheme.onSurface, height: 105, width: 126.87, ), ColorBox( label: 'Surf. Container\nHighest', tone: dark ? 'N-24' : 'N-90', color: scheme.surfaceContainerHighest, onColor: scheme.onSurface, height: 105, width: 126.87, ), ], ), const SizedBox(height: 5), Row( mainAxisSize: MainAxisSize.min, children: [ ColorBox( label: 'On Surface', tone: dark ? 'N-90' : 'N-10', color: scheme.onSurface, onColor: scheme.surface, height: 40, width: 158.59, ), ColorBox( label: 'On Surface Var.', tone: dark ? 'NV-90' : 'NV-30', color: scheme.onSurfaceVariant, onColor: scheme.surfaceContainerHighest, height: 40, width: 158.59, ), ColorBox( label: 'Outline', tone: dark ? 'NV-60' : 'NV-50', color: scheme.outline, onColor: scheme.surface, height: 40, width: 158.59, ), ColorBox( label: 'Outline Variant', tone: dark ? 'NV-30' : 'NV-80', color: scheme.outlineVariant, onColor: scheme.onSurface, height: 40, width: 158.59, ), ], ), ], ), const SizedBox(width: 20), Column( mainAxisSize: MainAxisSize.min, children: [ ColorBox( label: 'Error', tone: dark ? 'E-80' : 'E-40', color: scheme.error, onColor: scheme.onError, height: 87, width: 208, ), ColorBox( label: 'On Error', tone: dark ? 'E-20' : 'E-100', color: scheme.onError, onColor: scheme.error, height: 40, width: 208, ), const SizedBox(height: 5), ColorBox( label: 'Error Container', tone: dark ? 'E-30' : 'E-90', color: scheme.errorContainer, onColor: scheme.onErrorContainer, height: 87, width: 208, ), ColorBox( label: 'On Error Container', tone: dark ? 'E-90' : 'E-10', color: scheme.onErrorContainer, onColor: scheme.errorContainer, height: 40, width: 208, ), const SizedBox(height: 20), ColorBox( label: 'Inverse Surface', tone: dark ? 'N-90' : 'N-20', color: scheme.inverseSurface, onColor: scheme.onInverseSurface, height: 120, width: 208, ), ColorBox( label: 'Inverse On Surface', tone: dark ? 'N-20' : 'N-95', color: scheme.onInverseSurface, onColor: scheme.inverseSurface, height: 40, width: 208, ), const SizedBox(height: 5), ColorBox( label: 'Inverse Primary', tone: dark ? 'P-40' : 'P-80', color: scheme.inversePrimary, onColor: scheme.onSurface, height: 40, width: 208, ), const SizedBox(height: 16), Row( mainAxisSize: MainAxisSize.min, children: [ ColorBox( label: 'Scrim', tone: 'N-0', color: scheme.scrim, onColor: Colors.white, height: 40, width: 96.31, ), const SizedBox(width: 20), ColorBox( label: 'Shadow', tone: 'N-0', color: scheme.shadow, onColor: Colors.white, height: 40, width: 96.31, ), ], ), const SizedBox(height: 8), ], ), ], ), ], ), ), ), ); } }