Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Sign in
Toggle navigation
F
Front-End
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
abdullh.alsoleman
Front-End
Commits
574a7181
Unverified
Commit
574a7181
authored
Jun 08, 2023
by
Leigha Jarett
Committed by
GitHub
Jun 08, 2023
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Adding migration guide for Material 3 colors (#128429)
Fixes:
https://github.com/flutter/flutter/issues/127228
parent
a2803461
Changes
2
Show whitespace changes
Inline
Side-by-side
Showing
2 changed files
with
85 additions
and
4 deletions
+85
-4
color_scheme.dart
packages/flutter/lib/src/material/color_scheme.dart
+8
-4
colors.dart
packages/flutter/lib/src/material/colors.dart
+77
-0
No files found.
packages/flutter/lib/src/material/color_scheme.dart
View file @
574a7181
...
@@ -18,6 +18,10 @@ import 'theme_data.dart';
...
@@ -18,6 +18,10 @@ import 'theme_data.dart';
/// that can be used to configure the color properties of most components.
/// that can be used to configure the color properties of most components.
/// {@endtemplate}
/// {@endtemplate}
///
///
/// ### Colors in Material 3
///
/// {@macro flutter.material.colors.colorRoles}
///
/// The main accent color groups in the scheme are [primary], [secondary],
/// The main accent color groups in the scheme are [primary], [secondary],
/// and [tertiary].
/// and [tertiary].
///
///
...
@@ -44,10 +48,10 @@ import 'theme_data.dart';
...
@@ -44,10 +48,10 @@ import 'theme_data.dart';
/// contrast ratio with their matching colors of at least 4.5:1 in order to
/// contrast ratio with their matching colors of at least 4.5:1 in order to
/// be readable.
/// be readable.
///
///
///
The [Theme] has a color scheme, [ThemeData.colorScheme], which can either be
///
### Setting Colors in Flutter
///
passed in as a parameter to the constructor or by using 'brightness' and
///
///
'colorSchemeSeed' parameters (which are used to generate a scheme with
///
{@macro flutter.material.colors.settingColors}
//
/ [ColorScheme.fromSeed]).
//
@immutable
@immutable
class
ColorScheme
with
Diagnosticable
{
class
ColorScheme
with
Diagnosticable
{
/// Create a ColorScheme instance from the given colors.
/// Create a ColorScheme instance from the given colors.
...
...
packages/flutter/lib/src/material/colors.dart
View file @
574a7181
...
@@ -10,6 +10,83 @@ import 'package:flutter/painting.dart';
...
@@ -10,6 +10,83 @@ import 'package:flutter/painting.dart';
/// darker the color. There are 10 valid indices: 50, 100, 200, ..., 900.
/// darker the color. There are 10 valid indices: 50, 100, 200, ..., 900.
/// The value of this color should the same the value of index 500 and [shade500].
/// The value of this color should the same the value of index 500 and [shade500].
///
///
/// ## Updating to [ColorScheme]
///
/// The [ColorScheme] is preferred for
/// representing colors in applications that are configured
/// for Material 3 (see [ThemeData.useMaterial3]).
/// For more information on colors in Material 3 see
/// the spec at <https://m3.material.io/styles/color/the-color-system>.
///
///{@template flutter.material.colors.colorRoles}
/// In Material 3, colors are represented using color roles and
/// corresponding tokens. Each property in the [ColorScheme] class
/// represents one color role as defined in the spec above.
/// {@endtemplate}
///
/// ### Material 3 Colors in Flutter
///
///{@template flutter.material.colors.settingColors}
/// Flutter's Material widgets can be assigned colors at the widget level
/// using widget properties,
/// or at the app level using theme classes.
///
/// For example, you can set the background of the [AppBar] by
/// setting the [AppBar.backgroundColor] to a specific [Color] value.
///
/// To globally set the AppBar background color for your app, you
/// can set the [ThemeData.appBarTheme] property for your [MaterialApp]
/// using the [ThemeData] class. You can also override
/// the default appearance of all the [AppBar]s in a widget subtree by
/// placing the [AppBarTheme] at the root of the subtree.
///
/// Alternatively, you can set the [ThemeData.colorScheme] property
/// to a custom [ColorScheme]. This creates a unified [ColorScheme] to be
/// used across the app. The [AppBar.backgroundColor] uses the
/// [ColorScheme.surface] by default.
///{@endtemplate}
///
/// ### Migrating from [MaterialColor] to [ColorScheme]
///
/// In most cases, there are new properties in Flutter widgets that
/// accept a [ColorScheme] instead of a [MaterialColor].
///
/// For example, you may have previously constructed a [ThemeData]
/// using a primarySwatch:
///
/// ```dart
/// ThemeData(
/// primarySwatch: Colors.amber,
/// )
/// ```
///
/// In Material 3, you can use the [ColorScheme] class to
/// construct a [ThemeData] with the same color palette
/// by using the [ColorScheme.fromSeed] constructor:
///
/// ```dart
/// ThemeData(
/// colorScheme: ColorScheme.fromSeed(seedColor: Colors.amber),
/// )
/// ```
///
/// The [ColorScheme.fromSeed] constructor
/// will generate a set of tonal palettes,
/// which are used to create the color scheme.
///
/// Alternatively you can use the [ColorScheme.fromSwatch] constructor:
///
/// ```dart
/// ThemeData(
/// colorScheme: ColorScheme.fromSwatch(primarySwatch: Colors.amber),
/// )
/// ```
///
/// The [ColorScheme.fromSwatch] constructor will
/// create the color scheme directly from the specific
/// color values used in the [MaterialColor].
///
///
/// See also:
/// See also:
///
///
/// * [Colors], which defines all of the standard material colors.
/// * [Colors], which defines all of the standard material colors.
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment