Flutter - Using RichText Widget Examples

This tutorial shows you what's Flutter's RichText widget in Flutter and how to use it with some examples.

RichText is a widget in Flutter used for displaying a paragraph of text with multiple styles. Inside the widget, you can have different styles by having multiple TextSpan widgets, each can set its own style.

To have different styles, the common implementation is by having an outer TextSpan with a default style and some inner TextSpan widgets. The inner widgets need to have their own TextStyle for overriding the default style.

Code Examples

In the first example, there are three inner TextSpan widgets. The first one sets the font color to blue. The second doesn't have any styling, so it completely uses the outer TextSpan's style. The last one uses underline decoration.

  RichText(
    text: TextSpan(
        style: TextStyle(color: Colors.black, fontSize: 36),
        children: <TextSpan>[
          TextSpan(text: 'Woolha ', style: TextStyle(color: Colors.blue)),
          TextSpan(text: 'dot '),
          TextSpan(text: 'com', style: TextStyle(decoration: TextDecoration.underline))
        ],
    ),
  )

Output:

For the second example, the textScaleFactor property is set to 0.5, which results in smaller text size.

  RichText(
    text: TextSpan(
        style: TextStyle(color: Colors.black, fontSize: 36),
        children: <TextSpan>[
          TextSpan(text: 'Woolha ', style: TextStyle(color: Colors.blue)),
          TextSpan(text: 'dot '),
          TextSpan(text: 'com', style: TextStyle(decoration: TextDecoration.underline))
        ],
    ),
    textScaleFactor: 0.5,
  )

Output:

 

In the next examples we are going to have more TextSpan widgets which don't fit in one line. Instead of repeating the code, we create a variable for storing the collections.

  List<TextSpan> textSpans = <TextSpan>[
    TextSpan(text: 'Woolha ', style: TextStyle(color: Colors.blue)),
    TextSpan(text: 'dot '),
    TextSpan(text: 'com '),
    TextSpan(text: 'word '),
    TextSpan(text: 'word '),
    TextSpan(text: 'word'),
    TextSpan(text: 'word'),
    TextSpan(text: 'word'),
    TextSpan(text: 'word'),
    TextSpan(text: 'word'),
  ];

Pay attention to the 'word' texts. Only the first two 'word' texts have space at the end, while the other don't have.

  RichText(
    text: TextSpan(
        style: TextStyle(color: Colors.black, fontSize: 18),
        children: textSpans,
    ),
  )

Output:

From the output, you can see that the spacing is important to determine whether multiple texts should be treated as one word or not. Therefore the last five 'word' texts are in the next line although some of them should be fit in the first line. By having space at the end, the next text is treated as a different word.

The next example sets the text alignment to center using textAlign property.

  RichText(
    text: TextSpan(
        style: TextStyle(color: Colors.black, fontSize: 18),
        children: textSpans,
    ),
    textAlign: TextAlign.center,
  )

Output:

 

By default, the width of the widget depends on its parent. But you can set it using textWidthBasis. The example below sets the width based on the longest line.

  RichText(
    text: TextSpan(
        style: TextStyle(color: Colors.black, fontSize: 18),
        children: textSpans,
    ),
    textWidthBasis: TextWidthBasis.longestLine,
  )

Output:

 

You can handle text overflow using overflow property. For example, by using TextOverflow.ellipsis like the below example.

  RichText(
    text: TextSpan(
        style: TextStyle(color: Colors.black, fontSize: 18),
        children: textSpans,
    ),
    overflow: TextOverflow.ellipsis,
  )

Output:

 

It's also possible to set the maximum number of lines using maxLines property.

  RichText(
    text: TextSpan(
        style: TextStyle(color: Colors.black, fontSize: 18),
        children: textSpans,
    ),
    maxLines: 1,
  )

Output:

RichText Properties

Below are the properties you can use for customizing RichText.