msb-public
/
samples
mirror of https://github.com/flutter/samples.git
1
0
Code Issues Projects Releases Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'eb47a728ce'
${ noResults }
samples/material_3_demo/lib/scheme.dart

418 lines
17 KiB
Raw Normal View History Unescape

Improve color display in M3 Demo (#2438) - Added the color scheme schematic from Material Theme Builder aligning how colors are displayed here and in documentation across Android and Figma. - On desktop, individual colors can be copied to the clipboard - View adapts from the existing single column view to the new schematic at 500dp width. ### Before: <img width="1727" alt="Screenshot 2024-09-12 at 2 40 15 PM" src="https://github.com/user-attachments/assets/37423d79-174a-4691-b0e1-8f18c947550a"> ### After: ![mobile](https://github.com/user-attachments/assets/43a7bfbd-6217-4d3f-a1d6-902c99260905) ![Screenshot_20240912_144150](https://github.com/user-attachments/assets/48df7ad4-44a1-4802-8dac-06006dfb6bb1) ## Pre-launch Checklist - [x] I read the [Flutter Style Guide] _recently_, and have followed its advice. - [x] I signed the [CLA]. - [x] I read the [Contributors Guide]. - [x] I updated/added relevant documentation (doc comments with `///`). - [x] All existing and new tests are passing. If you need help, consider asking for advice on the #hackers-devrel channel on [Discord]. <!-- Links --> [Flutter Style Guide]: https://github.com/flutter/flutter/blob/master/docs/contributing/Style-guide-for-Flutter-repo.md [CLA]: https://cla.developers.google.com/ [Discord]: https://github.com/flutter/flutter/blob/master/docs/contributing/Chat.md [Contributors Guide]: https://github.com/flutter/samples/blob/main/CONTRIBUTING.md --------- Co-authored-by: Eric Windmill <ewindmill@google.com>
3 months ago
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<SchemePreview> createState() => _SchemePreviewState();
}
class _SchemePreviewState extends State<SchemePreview> {
@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),
],
),
],
),
],
),
),
),
);
}
}