Skip to content

Commit 5e6a1e4

Browse files
TahaTesserksokolovskyi
authored andcommitted
Update ColorScheme.light, ColorScheme.dark, ColorScheme.highContrastLight, & ColorScheme.highContrastDark constructors docs for Material 3 (flutter#137149)
fixes [Clarify ColorScheme fromSwatch/fromSeed usage](flutter#132584) "This explains how to use `ColorScheme.fromSeed` as a substitute for each `ColorScheme` constructor." | `ColorScheme.light` (left) to `ColorScheme.fromSeed` (right) | | --------------- | | ![light](https://github.com/flutter/flutter/assets/48603081/e056e723-5640-4b05-8feb-ca6b517c8682) | | `ColorScheme.dark` (left) to `ColorScheme.fromSeed` (right) | | --------------- | | ![dark](https://github.com/flutter/flutter/assets/48603081/5ff32611-bfb6-49ee-a34e-f935f580e84e) | | `ColorScheme.highContrastLight` (left) to `ColorScheme.fromSeed` (right) | | --------------- | | ![highContrastLight](https://github.com/flutter/flutter/assets/48603081/4b47f2e3-ea8e-4148-85cc-69690e9082c7) | | `ColorScheme.highContrastDark` (left) to `ColorScheme.fromSeed` (right) | | --------------- | | ![highContrastDark](https://github.com/flutter/flutter/assets/48603081/3dbd7ec4-c78e-4228-a8ed-673832681563) |
1 parent 1fbb739 commit 5e6a1e4

File tree

1 file changed

+102
-8
lines changed

1 file changed

+102
-8
lines changed

packages/flutter/lib/src/material/color_scheme.dart

Lines changed: 102 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -235,8 +235,29 @@ class ColorScheme with Diagnosticable {
235235
);
236236
}
237237

238-
/// Create a ColorScheme based on a purple primary color that matches the
239-
/// [baseline Material color scheme](https://material.io/design/color/the-color-system.html#color-theme-creation).
238+
/// Create a light ColorScheme based on a purple primary color that matches the
239+
/// [baseline Material 2 color scheme](https://material.io/design/color/the-color-system.html#color-theme-creation).
240+
///
241+
/// This constructor shouldn't be used to update the Material 3 color scheme.
242+
///
243+
/// For Material 3, use [ColorScheme.fromSeed] to create a color scheme
244+
/// from a single seed color based on the Material 3 color system.
245+
///
246+
/// {@tool snippet}
247+
/// This example demonstrates how to create a color scheme similar to [ColorScheme.light]
248+
/// using the [ColorScheme.fromSeed] constructor:
249+
///
250+
/// ```dart
251+
/// colorScheme: ColorScheme.fromSeed(seedColor: const Color(0xff6200ee)).copyWith(
252+
/// primaryContainer: const Color(0xff6200ee),
253+
/// onPrimaryContainer: Colors.white,
254+
/// secondaryContainer: const Color(0xff03dac6),
255+
/// onSecondaryContainer: Colors.black,
256+
/// error: const Color(0xffb00020),
257+
/// onError: Colors.white,
258+
/// ),
259+
/// ```
260+
/// {@end-tool}
240261
const ColorScheme.light({
241262
this.brightness = Brightness.light,
242263
this.primary = const Color(0xff6200ee),
@@ -290,8 +311,34 @@ class ColorScheme with Diagnosticable {
290311
_inversePrimary = inversePrimary,
291312
_surfaceTint = surfaceTint;
292313

293-
/// Create the recommended dark color scheme that matches the
294-
/// [baseline Material color scheme](https://material.io/design/color/dark-theme.html#ui-application).
314+
/// Create the dark color scheme that matches the
315+
/// [baseline Material 2 color scheme](https://material.io/design/color/dark-theme.html#ui-application).
316+
///
317+
/// This constructor shouldn't be used to update the Material 3 color scheme.
318+
///
319+
/// For Material 3, use [ColorScheme.fromSeed] to create a color scheme
320+
/// from a single seed color based on the Material 3 color system.
321+
/// Override the `brightness` property of [ColorScheme.fromSeed] to create a
322+
/// dark color scheme.
323+
///
324+
/// {@tool snippet}
325+
/// This example demonstrates how to create a color scheme similar to [ColorScheme.dark]
326+
/// using the [ColorScheme.fromSeed] constructor:
327+
///
328+
/// ```dart
329+
/// colorScheme: ColorScheme.fromSeed(
330+
/// seedColor: const Color(0xffbb86fc),
331+
/// brightness: Brightness.dark,
332+
/// ).copyWith(
333+
/// primaryContainer: const Color(0xffbb86fc),
334+
/// onPrimaryContainer: Colors.black,
335+
/// secondaryContainer: const Color(0xff03dac6),
336+
/// onSecondaryContainer: Colors.black,
337+
/// error: const Color(0xffcf6679),
338+
/// onError: Colors.black,
339+
/// ),
340+
/// ```
341+
/// {@end-tool}
295342
const ColorScheme.dark({
296343
this.brightness = Brightness.dark,
297344
this.primary = const Color(0xffbb86fc),
@@ -346,7 +393,28 @@ class ColorScheme with Diagnosticable {
346393
_surfaceTint = surfaceTint;
347394

348395
/// Create a high contrast ColorScheme based on a purple primary color that
349-
/// matches the [baseline Material color scheme](https://material.io/design/color/the-color-system.html#color-theme-creation).
396+
/// matches the [baseline Material 2 color scheme](https://material.io/design/color/the-color-system.html#color-theme-creation).
397+
///
398+
/// This constructor shouldn't be used to update the Material 3 color scheme.
399+
///
400+
/// For Material 3, use [ColorScheme.fromSeed] to create a color scheme
401+
/// from a single seed color based on the Material 3 color system.
402+
///
403+
/// {@tool snippet}
404+
/// This example demonstrates how to create a color scheme similar to [ColorScheme.highContrastLight]
405+
/// using the [ColorScheme.fromSeed] constructor:
406+
///
407+
/// ```dart
408+
/// colorScheme: ColorScheme.fromSeed(seedColor: const Color(0xff0000ba)).copyWith(
409+
/// primaryContainer: const Color(0xff0000ba),
410+
/// onPrimaryContainer: Colors.white,
411+
/// secondaryContainer: const Color(0xff66fff9),
412+
/// onSecondaryContainer: Colors.black,
413+
/// error: const Color(0xff790000),
414+
/// onError: Colors.white,
415+
/// ),
416+
/// ```
417+
/// {@end-tool}
350418
const ColorScheme.highContrastLight({
351419
this.brightness = Brightness.light,
352420
this.primary = const Color(0xff0000ba),
@@ -401,7 +469,33 @@ class ColorScheme with Diagnosticable {
401469
_surfaceTint = surfaceTint;
402470

403471
/// Create a high contrast ColorScheme based on the dark
404-
/// [baseline Material color scheme](https://material.io/design/color/dark-theme.html#ui-application).
472+
/// [baseline Material 2 color scheme](https://material.io/design/color/dark-theme.html#ui-application).
473+
///
474+
/// This constructor shouldn't be used to update the Material 3 color scheme.
475+
///
476+
/// For Material 3, use [ColorScheme.fromSeed] to create a color scheme
477+
/// from a single seed color based on the Material 3 color system.
478+
/// Override the `brightness` property of [ColorScheme.fromSeed] to create a
479+
/// dark color scheme.
480+
///
481+
/// {@tool snippet}
482+
/// This example demonstrates how to create a color scheme similar to [ColorScheme.highContrastDark]
483+
/// using the [ColorScheme.fromSeed] constructor:
484+
///
485+
/// ```dart
486+
/// colorScheme: ColorScheme.fromSeed(
487+
/// seedColor: const Color(0xffefb7ff),
488+
/// brightness: Brightness.dark,
489+
/// ).copyWith(
490+
/// primaryContainer: const Color(0xffefb7ff),
491+
/// onPrimaryContainer: Colors.black,
492+
/// secondaryContainer: const Color(0xff66fff9),
493+
/// onSecondaryContainer: Colors.black,
494+
/// error: const Color(0xff9b374d),
495+
/// onError: Colors.white,
496+
/// ),
497+
/// ```
498+
/// {@end-tool}
405499
const ColorScheme.highContrastDark({
406500
this.brightness = Brightness.dark,
407501
this.primary = const Color(0xffefb7ff),
@@ -458,10 +552,10 @@ class ColorScheme with Diagnosticable {
458552
/// Creates a color scheme from a [MaterialColor] swatch.
459553
///
460554
/// In Material 3, this constructor is ignored by [ThemeData] when creating
461-
/// its default color scheme. Instead, [ThemeData] uses [ ColorScheme.fromSeed]
555+
/// its default color scheme. Instead, [ThemeData] uses [ColorScheme.fromSeed]
462556
/// to create its default color scheme. This constructor shouldn't be used
463557
/// to update the Material 3 color scheme. It will be phased out gradually;
464-
/// see https://github.com/flutter/flutter/issues/91772 for more details.
558+
/// see https://github.com/flutter/flutter/issues/120064 for more details.
465559
///
466560
/// If [ThemeData.useMaterial3] is false, then this constructor is used by
467561
/// [ThemeData] to create its default color scheme.

0 commit comments

Comments
 (0)