Flutter Text Color

Change text color of Flutter Text Widget

In this tutorial, you will learn how to change the color of text in Text widget of Flutter.

You can change the color of text by specifying color property for style in Text widget.

Sample Code Snippet

Following is a sample code snippet where we changed the color to text to blue.

new Text(
  'Welcome to Flutter Tutorial.',
  style: TextStyle(
    color: Colors.blue,
  ),
)

There are many ways in which we can specify the color. We shall see each of them in detail in the example Flutter application below. But, firstly, we shall go through a complete example.

Example

Create a basic Flutter Application and replace main.dart with the following code.

main.dart

import 'dart:ui';

import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(
    home: new MyApp(),
  ));
}

class MyApp extends StatefulWidget {
  @override
  _State createState() => new _State();
}

class _State extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Flutter Tutorial - googleflutter.com'),
      ),
      body: new Center(
        child: new Text(
          'Welcome to Flutter Tutorial.',
          style: TextStyle(
            color: Colors.blue,
            fontSize: 25,
          ),
        ),
      ),
    );
  }
}

Run the application, and you should see an UI similar to that of shown in the following screenshot.

Example 2

In this example, we have used different ways to provide the value for color property.

In the following main.dart, we have provided three ways on how to mention a color value. They are:

• Colors
• Color.fromARGB(alpha, red, green, blue)
• Color.fromRGBO(red, green, blue, opacity)

Create a Flutter Application and replace main.dart file with the following code.

main.dart

import 'dart:ui';

import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(
    home: new MyApp(),
  ));
}

class MyApp extends StatefulWidget {
  @override
  _State createState() => new _State();
}

class _State extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Flutter Tutorial - googleflutter.com'),
      ),
      body: new Center(
        child: new Column(
          children: <Widget>[
            //default color
            new Text(
              'Welcome to Flutter Tutorial.',
              style: TextStyle(
                fontSize: 25,
              ),
            ),
            new Text(
              'Welcome to Flutter Tutorial.',
              style: TextStyle(
                //inbuilt named colors
                color: Colors.blue,
                fontSize: 25,
              ),
            ),
            new Text(
              'Welcome to Flutter Tutorial.',
              style: TextStyle(
                //using ARGB (Alpha Red Green Blue)
                color: Color.fromARGB(255, 255, 0, 0),
                fontSize: 25,
              ),
            ),
            new Text(
              'Welcome to Flutter Tutorial.',
              style: TextStyle(
                //using RGBO (Red Green Blue Opacity)
                color: Color.fromRGBO(0, 155, 0, 0.8),
                fontSize: 25,
              ),
            ),
          ],
        )
      ),
    );
  }
}

Run the application, and you would see Text widgets with different colors as shown below.

Summary

In this Flutter Tutorial, we have learned how to change the color of text in Text widget using its style property.

References

• For complete details on Colors class, refer https://api.flutter.dev/flutter/material/Colors-class.html