How to Style Your Text in Flutter

Today we’re focusing on TextStyles. Every app has a text but everyone should know how to style them. That is why I am going to share how to style them. Let’s go!

FontWeight and FontStyle

You probably already know how to make normal Text like this:

const Text('This is a normal text.')

This is how to make it bold:

const Text(
          'This is a bold text.',
          style: TextStyle(fontWeight: FontWeight.bold),

And this is how to make it italic:

const Text(
          'This is a italic text.',
          style: TextStyle(fontStyle: FontStyle.italic),

But you can also combine them:

const Text(
          'This is a bold and italic text.',
          style: TextStyle(fontWeight: FontWeight.bold, fontStyle: FontStyle.italic),

You can also apply decoration in them like this:

const Text(
          'This is a underlined wavy text.',
          style: TextStyle(
              decoration: TextDecoration.underline,
              decorationStyle: TextDecorationStyle.wavy),

Advanced Style

This one is a little advance I am using the Paint() class for the foreground argument and LinearGradient in shader arguments and a list of colors. Here’s the code:

          "Nucleio Technologies",
          style: TextStyle(
            fontSize: 30.0,
            fontWeight: FontWeight.bold,
            foreground: Paint()
              ..shader = const LinearGradient(
                colors: <Color>[
                  //add more color here.
                const Rect.fromLTWH(0.0, 0.0, 200.0, 100.0),

Nicely done! Now if you follow through that you got yourself a fancy gradient text!

Here’s the full application look like:


I’ve covered the basics of styling the Text widget in Flutter and I also added how to apply a linear gradient on the text.

You could also read the docs here incase there’s any changes in the future:

That’s all for today, Keep following me on my Flutter journey.
Until next time, Farewell!

Leave a Comment

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