how to change color of text in flutter

How to Change Text Color in Flutter App?

There are certain times in the Flutter app development process when you need to change the color of text. There are a number of reasons why this may be the case. It could be because the client has asked you for the changes or you may want to change it on your own. Whatever the case is, you’ll no longer have to look further to change the color of the text in Flutter after going through this guide.

By the end of this blog, you will learn how you can change the text color in Flutter using different methods. So be with us so you don’t miss out on any point. 

Let us first get to know what is a flutter text widget.

What is Flutter Text Widget?

The Flutter text widget is used to display strings of text that we add to our code. You can display the text in different colors, styles, and sizes. The text widget gives you full control over how you want to display text within your app.

Steps to Change the Color of Text in Flutter

In Flutter, changing the text color isn’t that difficult. You can simply change it by adding the TextStyle property and defining the colors, opacity, font size, etc.

Let’s move forward with knowing the steps to change the color of the text in Flutter.

To change the text color, you must add style to the text widget. Remember that you cannot call the TextStyle widget inside the string. So separate it with a comma and then add the TextStyle widget.

Step #01. Head over to the position where you have added the Text widget to display the text. 

Step #02. Add the style parameter and assign the TextStyle property next to it. 

Step 03. Set a color inside the TextStyle property this way; style: TextStyle(color: Colors.red)).

Example:

///Default Color

Text('Hello World!', style: TextStyle(fontSize: 25)),

///Color changed to red

Text('Hello World!',

    style: TextStyle(color: Colors.red, fontSize: 25)),

Results:

change text color using color class

As you can see in the screenshot above, the default text color (black) of “Hello World!” has been changed to red.

Different Ways to Change Text Color in Flutter

There are different ways in which you can change the color of the text in Flutter apps. Let us discuss them with the sample code and respective results as well.

Using the color class is the most common way to change text color in Flutter. As the above-mentioned method is to change the text color using color class, we will discuss some other ways to change the color of the text.

1. Color.formRGBO

The color.formRGBO constructor in Flutter creates a combination of colors within red, green, and blue and sets an opacity.

Code Example:

Text(
  'Hello World!',
  style: TextStyle(
      color: Color.fromRGBO(17, 35, 236, 0.6), fontSize: 25),
),
Text(
  'Hello World!',
  style: TextStyle(
      color: Color.fromRGBO(249, 157, 29, 1), fontSize: 25),
),

Result:

flutter change text color using color.RGBO

2. Color.formARGB

In the color.fomARGB method, Dart creates color from the four ARGB colors. These are alpha, red, green, and blue. As you set the desired value for each color, Dart creates a respective text color.

Code Example:

///Color changed using ARGB
const Text(
  'Hello World!',
  style: TextStyle(
      color: Color.fromARGB(211, 132, 144, 101), fontSize: 25),
),
const Text(
  'Hello World!',
  style: TextStyle(
      color: Color.fromARGB(50, 117, 101, 29), fontSize: 25),
),

Results:

Color.fromARGB library

3. Using Hexadecimal Code String

Using the hexadecimal code string is another way to add colored text in Flutter. It represents different colors as #RRGGBB which are red, green, and blue. Below is the example for adding the text color using hexadecimal code.

Code Example:

///Color changed using HexCode
const Text(
  'Hello World!',
  style: TextStyle(color: Color(0xff123456), fontSize: 25),
),
const Text(
  'Hello World!',
  style: TextStyle(color: Color(0xff654321), fontSize: 25),
),

Results:

hex color strings in flutter

4. Adjusting Text Color Opacity

Whenever you are to change the color of text, you might also need to change its opacity. For that, you can add opacity with each color class in case you’re using a color class for adding one color. Here is an example.

Code Example:

///Color with opacity
Text(
  'Hello World!',
  style:
      TextStyle(color: Colors.pink.withOpacity(0.2), fontSize: 25),
),
Text(
  'Hello World!',
  style:
      TextStyle(color: Colors.pink.withOpacity(0.5), fontSize: 25),
),

Results:

change text opacity in flutter

Conclusion

So that’s a wrap to this quick guide on how to change the color of the text in any Flutter app. We hope that you get to learn how you can change the text color. Moreover, you won’t be needing to remember the code for all the scenarios because we have provided you with them all 😉 Enjoy the royalty-free code and see you in the next blog.

Leave a Comment

Your email address will not be published. Required fields are marked *

Share Post On

Haroon Ashraf

Flutter Developer

Detail-oriented full-stack engineer with 9+ years of industry experience. He’s been working on Flutter since 2018 and has delivered 30+ successful projects.He has experience in project management Trello, Github, Jira…..

Flutter
Xcode
IOS-Swift
Full Stack
Bloc/Cubit
Nodejs

Experience

Availability

9 years

Full-Time

Translate »