Professional Documents
Culture Documents
Colors
Colors
Colors
Flutter's `Colors` class is a key part of the material design library in the Flutter framework, providing a
collection of predefined colors that can be used to style the visual aspects of your app. Here are some
important aspects of Flutter Colors:
1. Predefined Colors
Flutter's `Colors` class includes a wide range of standard colors that follow the material design
guidelines. These colors are represented as static constants and cover the entire spectrum. Examples
include:
- `Colors.red`
- `Colors.blue`
- `Colors.green`
- `Colors.yellow`
Each of these colors can also have different shades, accessible through properties like
`Colors.blue[50]` to `Colors.blue[900]`.
2. Opacity Variant
Each color in the `Colors` class can be used with different levels of opacity. This is done using the
`withOpacity` method, which allows you to create colors with transparency. For example:
3. Swatch Colors
Swatch colors in Flutter are groups of colors that include a primary color and its variations. The primary
color is used in different shades and tints. Flutter provides swatch colors such as `Colors.red`,
`Colors.blue`, etc., which include multiple shades ranging from light to dark. For example:
4. Custom Colors
If the predefined colors do not meet your needs, you can create custom colors using the `Color` class.
You can define a color using a 32-bit integer value (ARGB format):
6. Usage in Themes
Colors are extensively used in Flutter's theming system to define the overall color scheme of an app. The
`ThemeData` class includes properties for primary, accent, background, and other colors:
ThemeData(
primaryColor: Colors.blue,
accentColor: Colors.orange,
backgroundColor: Colors.white,
)
7. Text Colors
The `Colors` class also includes predefined colors for text. For example, `Colors.black` and `Colors.white`
are commonly used for text colors to ensure good contrast and readability.
Example Usage
Here is a simple example of using colors in a Flutter widget:
import 'package:flutter/material.dart';
Flutter Page 1
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
In this example, we use `Colors.blue` for the `AppBar` background and `Colors.white` for the text color
Flutter Page 2