Press "Enter" to skip to content

Flutter: 15 Text Style Shadow, Gradient, Opacity, Stroke, Background Color, Spacing, Bold, Italic, etc

 Hi friends.. How are you today?

In this tutorial you can change your font text style on flutter with shadow, gradient, opacity, stroke, border, font size, font color, background color, bold, italic, underline, overline, Strikethrough, letter spacing, word space, etc.

How to add basic styles to text on flutter ?

You can simply add text styles using text’s style property.

Text("How are you today?",
       style: new TextStyle(
             // Text styles here
             )
     )

Here let’s learn 15 types style for your text.

1. Font size

Changing the size of font is important in almost applications. You can simply use the fontSize attribute for this purpose. You need to specify the size in number without any scale like px.

Text("How are you today?",
      style: new TextStyle(
      fontSize: 20,
     )
)

Sample output:

Change font size for  font text in flutter

2. Bold

 Bold, italic and underline are three major text styles in all types of text editors even on writing using a pen on a paper.

Text("How are you today?",
  style: new TextStyle(
      fontWeight: FontWeight.bold     
     )
  )
Make font text bold in flutter

You can customize the font weight thickness using w100, w200, w300, w400, w500, w600, w700, w800 and w900 of various thickness properties.

font text weight style in flutter

3.Italic

Here fontStyle property is used to make text is italic

Text("How are you today?",
  style: new TextStyle(
      fontStyle: FontStyle.italic    
     )
Italic style for font text in flutter

4. Underline

For getting underline style, ‘TextDecoration’ property is used.

Text("How are you today?",
  style: new TextStyle(
      decoration: TextDecoration.underline
     )
  )
Text underline style in flutter

5. Overline

Like underline, here a line is place over the text. Same TextDecoration is used and property ‘overline’ is used instead of underline.

Text("How are you today?",
  style: new TextStyle(
      decoration: TextDecoration.overline
     )
  )
Overline for font text in flutter

6. Strikethrough (lineThrough)

A line is place on middle of the text horizontally.  

Text("How are you today?",
  style: new TextStyle(
      decoration: TextDecoration.lineThrough
     )
  )
Strikethrough or lineThrough style for text font in flutter

7. Font color

You can make the text color different than default black color.

Just use the ‘color’ property.

Text("How are you today?",
  style: new TextStyle(
      color:  Colors.red
     )
  )
Change font text color in flutter

8. Background color

You can change the background color of text color.

Text("How are you today?",
  style: new TextStyle(
      color: Colors.white,
      backgroundColor: Colors.black
   )
)
Change font text background color in flutter

9. Letter Spacing

You can adjust the space between letters. If you give negative value (example: -2), then letters will be shrink more.

Text("How are you today?",
  style: new TextStyle(
      letterSpacing: 5.0, 
    )
  )
Letter spacing in flutter font text

10. Word Spacing

As we adjust letter space, we can also adjust space between words.

Text("How are you today?",
  style: new TextStyle(
      wordSpacing: 30.0,
    )
  )
Word space for font text in flutter

11. Opacity

It is easy to set opacity for your text. You need to set the opacity level with color.

Column(
    children: <Widget>[
      Text("How are you today?",
        style: TextStyle(
          fontSize: 30,
            color: Colors.black.withOpacity(0.2)
        ),
      ),
      Text("How are you today?",
        style: TextStyle(
          fontSize: 30,
            color: Colors.black.withOpacity(0.4)
        ),
      ),
      Text("How are you today?",
        style: TextStyle(
          fontSize: 30,
            color: Colors.black.withOpacity(0.6)
        ),
      ),
      Text("How are you today?",
        style: TextStyle(
          fontSize: 30,
            color: Colors.black.withOpacity(0.8)
        ),
      ),
      Text("How are you today?",
        style: TextStyle(
          fontSize: 30,
            color: Colors.black.withOpacity(1.0)
        ),
      ), 
  ],
 )
Flutter opacity for font text

12. Border and Stroke

You can make border or stroke using inbuilt paint function.

Text(
  "How are you today?",
  style: TextStyle(
    fontSize: 30, 
    foreground: Paint()
      ..style = PaintingStyle.stroke
      ..strokeWidth = 2
      ..color = Colors.green,
  ),
)
Font text border color in flutter

Here you cannot set font color using color:  Colors.red method. But you can fill same color with ..style = PaintingStyle.fill property.

But if you want to set a color for a text and another color as stroke, then you need to use stack. Using Stack, we can place a text over another text, here we place same text on another. First text is used for stroke and second text is used for text color. You can read more about stack here.

Stack(
    children: <Widget>[
      Text("How are you today?",
        style: TextStyle(
          fontSize: 30,
          //color: Colors.blue – will not work
          foreground: Paint()
            ..style = PaintingStyle.stroke
            ..strokeWidth = 4
            ..color = Colors.red,
        ),
      ),

      Text("How are you today?",
        style: TextStyle(
          fontSize: 30,
          color: Colors.blue,
        ),
      )
  ],
 )
Stroke border font text style in flutter

Note that, text on both ‘Text’s and fontSize should be same, else you cannot get a result like above.

13. Shadow

Making a shadow effects on text is attractive. Simply add shadows property as TextStyle.

shadows: [
  Shadow(
    blurRadius: 12.0,
    color: Colors.red,
    offset: Offset(1.0, 5.0),
  ),
],

You can add more than one shadows for a single text.

Example

Column(
    children: <Widget>[
      Text("How are you today?",
        style: TextStyle(
          shadows: [
            Shadow(
              blurRadius: 12.0,
              color: Colors.blue,
              offset: Offset(1.0, 5.0),
            ),
          ],
          fontSize: 30,
        ),
      ),

      Text("How are you today?",
        style: TextStyle(
          shadows: [
            Shadow(
              blurRadius: 12.0,
              color: Colors.red,
              offset: Offset(1.0, 5.0),
            ),
          ],
            fontSize: 30,
        ),
      ),

      Text("How are you today?",
        style: TextStyle(
          shadows: [
            Shadow(
              blurRadius: 5.0,
              color: Colors.blue,
              offset: Offset(1.0, 5.0),
            ),
            Shadow(
              blurRadius: 12.0,
              color: Colors.red,
              offset: Offset(2.0, 6.0),
            ),
          ],
          fontSize: 30,
        ),
      ),
     ],
 )

Where blurRadius adjust the shadow level and Offset(x, y) values denote the position of shadow as x and y axis respectively.

Output

Shadow style in flutter text

14. Gradients

Adding gradients is more attractive on app design.

Text("How are you today?",
  style: TextStyle(
    fontSize: 40,
    fontWeight:  FontWeight.w900,
    foreground: Paint()
      ..shader = LinearGradient(
        colors: <Color>[
          Colors.red,
          Colors.black,
          Colors.blue
        ],
      ).createShader(Rect.fromLTWH(100, 0, 200, 0))
  ),
),

Inside <Color> parameters, you can add many types of colors that you want to fill on gradients. Inside ‘fromLTWH’ you can adjust the width of the gradient level.

Gradient style for text in flutter

15. Custom Fonts

You change the default font for the text. Here you need to import a new font to your project. You can read more about adding a new font here.  

Be First to Comment

Leave a Reply

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