Colors

You might also like

Download as pdf or txt
Download as pdf or txt
You are on page 1of 2

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:

Color transparentRed = Colors.red.withOpacity(0.5);

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:

Color lightBlue = Colors.blue[100];


Color darkBlue = Colors.blue[900];

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):

Color customColor = Color(0xFF42A5F5); // A specific shade of blue

5. Material Color and Accent Color


Material colors in Flutter are used to create consistent and visually appealing designs. They include
primary and accent colors, which can be defined using the `MaterialColor` and `MaterialAccentColor`
classes. These classes are typically used for themes:

MaterialColor primaryColor = Colors.blue;


MaterialAccentColor accentColor = Colors.blueAccent;

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());
}

class MyApp extends StatelessWidget {


@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Flutter Colors Example'),
backgroundColor: Colors.blue,
),
body: Center(
child: Text(
'Hello, Flutter!',
style: TextStyle(
color: Colors.white,
backgroundColor: Colors.blueAccent,
fontSize: 24,
),
),
),
),
);
}
}

In this example, we use `Colors.blue` for the `AppBar` background and `Colors.white` for the text color

Flutter Page 2

You might also like