How to use TextStyle in Flutter

TextStyle is not originally a #flutter widget. It decorates the text widget with different parameters. There are multiple ways to create TextStyle with pre defined themes.

Getting Started with TextStyle Widget

Using TextStyle we can change the color, size, decorator, weight, etc.‌

Text(
  'Hello, mobilelabs!',
  style: TextStyle(),
)

Change text color in Flutter

Text(
  'Hello, mobilelabs!',
  style: TextStyle(color: Colors.deepPurpleAccent),
)

Adding Colors in different ways

There are main three ways you can add color to the Text widget.

1. Colors.blue: This is used to define from the predefined colors.
2. Color(0xffF03E39): This is used to have a custom color.
3. Color.fromARGB(255, 54, 115, 45): This is used to have color from the alpha, red, green, and blue color combination.

Text(
  'mobilelabs - How to use TextStyle in Flutter?',
  style: TextStyle(fontSize: 50, color: Colors.deepPurpleAccent),
),
Text(
  'mobilelabs - How to change text color in flutter using TextStyle?',
  style: TextStyle(fontSize: 50, color: Color(0xffF02E65)),
),
Text(
  'mobilelabs - How to change text RGB color in flutter using TextStyle?',
  style: TextStyle(
      fontSize: 50, color: Color.fromARGB(255, 66, 125, 145)),
),

Create TextStyle in Flutter theme

MaterialApp(
  title: 'Flutter Demo',
  theme: ThemeData(
    textTheme:
        TextTheme(headline2: TextStyle(color: Colors.deepPurpleAccent),
),
  ),
  home: ChangeTextColorDemo(),
);

‌‌You can create default TextStyles in theme and pass minimal parameters in the Text widgets. This will inherit the default styles and render the styled text.

Conclusion‌‌

In this tutorial, we learned how to change text color in Flutter with practical examples, we first saw how to change the color at the page level and then explored the way to change color at the app level. Finally, we also learned what are the different ways to add colors.