text colour shade

Quick Tip – How to change font colour in Flutter

Basics /

What is the font colour in Fluter?

In Flutter, the font colour refers to the colour of the text displayed in a Text widget. You can use the style property of the Text widget to specify the font colour, as well as other styling properties such as the font size, font family, and font weight. The style property takes a TextStyle object, which has a colour property that you can use to set the font colour.

Here’s an example of how you might use the TextStyle object to change the font colour:

Text(
  'Hello World',
  style: TextStyle(
    color: Colors.red,
  ),
),

How to change font colour in Flutter

To change the font colour in Flutter, you can use the style property of the Text widget. The style property takes a TextStyle object, which allows you to specify various styling properties for the text, including the colour.

Here’s an example of how you might use the style property to change the font colour:

            Text(
              'flutterassets.com',
              style: TextStyle(
                fontSize: 30,
                fontWeight: FontWeight.w900,
                color: Colors.green
              ),
            ),

Also, you can use the textTheme property of the ThemeData class to specify default styling for text in an app or subtree. The textTheme property takes a TextTheme object, which has several properties that you can use to specify default text styles for various types of text.

flutter font colour
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        textTheme: const TextTheme(
          bodyText2: TextStyle(color: Colors.red, fontWeight: FontWeight.w900),
        ),
      ),
      home: const MyHomePage(title: 'Flutter Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {

    // Get the current value of MediaQuery.boldText
    bool boldText = MediaQuery.of(context).boldText;

    return Scaffold(
      appBar: AppBar(
        title: const Text('flutterassets.com'),
      ),
      body: const Padding(
        padding: EdgeInsets.all(8.0),
        child: Text('Hello World',
          style: TextStyle(fontSize: 34),
        ),
      ),
    );
  }
}

Methods of adding colours in Flutter

Flutter predefined colours

Flutter provides a set of predefined colours as part of the Colors class. These colours include a range of bright and subdued shades and can be used as-is or modified using the withOpacity method of the Color class.

Here is a list of a few predefined colours available in Flutter:

  • Colors.red
  • Colors.green
  • Colors.blue
  • Colors.yellow
  • Colors.orange
  • Colors.grey
  • Colors.black
  • Colors.white
Text('Hello World',
  style: TextStyle(
      fontSize: 34,
    color: Colors.red
  ),
),
flutter text red

Flutter custom RGB colours

You can create custom colours in Flutter using the Color class, which allows you to specify the red, green, and blue values of a colour. You can also use the Color class to create a colour from a hex code string.

flutter color.fromRGBO

In Flutter, you can use the Color class’s fromRGBO method to create a colour from individual red, green, and blue values. The fromRGBO method takes four arguments:

  1. red: An integer value between 0 and 255 that specifies the red component of the colour.
  2. green: An integer value between 0 and 255 that specifies the green component of the colour.
  3. blue: An integer value between 0 and 255 that specifies the blue component of the colour.
  4. opacity: A double value between 0.0 and 1.0 that specifies the opacity of the colour.

Here’s an example of how you might use the fromRGBO method to create a colour:

Text('Hello World',
  style: TextStyle(
      fontSize: 34,
    color: Color.fromRGBO(255, 0, 0, 1.0),
  ),
),
flutter text red

This will create a Color object with a red value of 255, a green value of 0, and a blue value of 0. The fourth argument, 1.0, specifies the opacity of the colour (1.0 is fully opaque, 0.0 is fully transparent).

flutter Color.fromARGB

In Flutter, you can use the Color class’s fromARGB method to create a colour from individual alpha, red, green, and blue values. The fromARGB method takes four arguments:

  1. alpha: An integer value between 0 and 255 that specifies the alpha (transparency) component of the colour.
  2. red: An integer value between 0 and 255 that specifies the red component of the colour.
  3. green: An integer value between 0 and 255 that specifies the green component of the colour.
  4. blue: An integer value between 0 and 255 that specifies the blue component of the colour.

Here’s an example of how you might use the fromARGB method to create a colour:

Text('Hello World',
  style: TextStyle(
      fontSize: 34,
    color: Color.fromARGB(255, 255, 0, 0),
  ),
),
flutter text red

This will create a Color object with an alpha value of 255 (fully opaque), a red value of 255, a green value of 0, and a blue value of 0.

Flutter colour format 0xAARRGGBB or 0xFFFFFFFF or 0xFF000000

In Flutter, you can use the Color class to create a colour by specifying its red, green, and blue values as integers. The Color constructor takes an integer value that represents a combination of these values in the format 0xAARRGGBB, where AA is the alpha (transparency) value, RR is the red value, GG is the green value, and BB is the blue value.

color: const Color(0xFF00FF00),

Color(0xFF00FF00) is a Flutter Color object that represents the colour green.

In the case of Color(0xFF00FF00), the FF value for the alpha component indicates that the colour is fully opaque, the 00 value for the red component indicates that there is no red in the colour, the FF value for the green component indicates that the colour is fully green, and the 00 value for the blue component indicates that there is no blue in the colour.

            Text(
              'flutterassets.com',
              style: TextStyle(
                fontSize: 30,
                fontWeight: FontWeight.w900,
                color: const Color(0xFF00FF00),
              ),
            ),
flutter text green

flutter colour withOpacity

In Flutter, the withOpacity method of the Color class allows you to create a new colour that is based on an existing colour, but with a different opacity (transparency) value.

The withOpacity method takes a single argument, opacity, which is a double value between 0.0 and 1.0 that specifies the opacity of the new colour. A value of 0.0 means that the colour is fully transparent, while a value of 1.0 means that the colour is fully opaque.

Here’s an example of how you might use the withOpacity method to create a new colour based on an existing colour:

Color originalColor = Colors.red;
Color newColor = originalColor.withOpacity(0.5);

This will create a new Color object that is based on the Colors.red colour, but with an opacity of 0.5 (semi-transparent).

You can then use the new colour in your Flutter app by specifying it in the color property of a Text widget’s style property.

Text('Hello World',
  style: TextStyle(
      fontSize: 34,
    color: Colors.red.withOpacity(0.5),
  ),
),
flutter text red withopacity

How to use a colour shade in Flutter

The Colors class in Flutter provides a range of predefined colours, including various shades of each colour. The shades are numbered from 100 (lightest) to 900 (darkest).

In the code example below you can find all the shades from the list.

For example, to use a lighter shade of blue, you can use the Colors.blue.shade100 colour, which is a very light shade of blue. To use a darker shade of blue, you can use the Colors.blue.shade800 colour, which is a darker shade of blue. Colour with shade50 is also added to the above range in some colours.

List of colour shades in Flutter

The example below shows the blue colour with different shades.

  • color: Colors.blue.shade50
  • color: Colors.blue.shade100
  • color: Colors.blue.shade200
  • color: Colors.blue.shade300
  • color: Colors.blue.shade400
  • color: Colors.blue.shade500
  • color: Colors.blue.shade600
  • color: Colors.blue.shade700
  • color: Colors.blue.shade800
  • color: Colors.blue.shade900
      Center(
        child:
        Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'flutterassets.com',
              style: TextStyle(fontSize: 30,fontWeight: FontWeight.w900,color: Colors.green.shade50
              ),
            ),
            Text(
              'flutterassets.com',
              style: TextStyle(fontSize: 30,fontWeight: FontWeight.w900,color: Colors.green.shade100
              ),
            ),
            Text(
              'flutterassets.com',
              style: TextStyle(fontSize: 30,fontWeight: FontWeight.w900,color: Colors.green.shade200
              ),
            ),
            Text(
              'flutterassets.com',
              style: TextStyle(fontSize: 30,fontWeight: FontWeight.w900,color: Colors.green.shade300
              ),
            ),
            Text(
              'flutterassets.com',
              style: TextStyle(fontSize: 30,fontWeight: FontWeight.w900,color: Colors.green.shade400
              ),
            ),
            Text(
              'flutterassets.com',
              style: TextStyle(fontSize: 30,fontWeight: FontWeight.w900,color: Colors.green.shade500
              ),
            ),
            Text(
              'flutterassets.com',
              style: TextStyle(fontSize: 30,fontWeight: FontWeight.w900,color: Colors.green.shade600
              ),
            ),
            Text(
              'flutterassets.com',
              style: TextStyle(fontSize: 30,fontWeight: FontWeight.w900,color: Colors.green.shade700
              ),
            ),
            Text(
              'flutterassets.com',
              style: TextStyle(fontSize: 30,fontWeight: FontWeight.w900,color: Colors.green.shade700
              ),
            ),
            Text(
              'flutterassets.com',
              style: TextStyle(fontSize: 30,fontWeight: FontWeight.w900,color: Colors.green.shade900
              ),
            ),
          ],
        ),
      ),
text colour shade

You can find more Text widget examples in this post: Flutter Basics – What is and how to use Text widget in Flutter

Related Posts