Using RichText and TextSpan in Flutter

Every website and mobile app, more or less, contains text. In Flutter, you can display a paragraph text that has multiple different styles by using a RichText widget and a tree of TextSpan widgets in combination. The text may be on a single line or multiple lines based on the layout constraints.

In this article, we will take a look that the RichText and TextSpan widgets and walk through a few examples of implementing them in action. We’ll also explore an alternative to RichText, which is Rich.text.

Overview

A quick example

The code:

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: const Text('Kindacode.com')),
        body: Padding(
          padding: const EdgeInsets.all(25),
          child: RichText(
            text: const TextSpan(children: [
              TextSpan(
                  text: 'The dog ',
                  style: TextStyle(
                      fontWeight: FontWeight.bold, color: Colors.red)),
              TextSpan(
                  text: 'is a domesticated carnivore ',
                  style: TextStyle(
                      fontStyle: FontStyle.italic, color: Colors.purple)),
              TextSpan(
                  text: 'of the family Canidae.',
                  style: TextStyle(color: Colors.green))
            ]),
          ),
        ));
  }
}

Screenshot:

RichText Constructor

RichText({
  Key? key, 
  required InlineSpan text, 
  TextAlign textAlign = TextAlign.start, 
  TextDirection? textDirection, 
  bool softWrap = true, 
  TextOverflow overflow = TextOverflow.clip, 
  double textScaleFactor = 1.0, 
  int? maxLines, 
  Locale? locale, 
  StrutStyle? strutStyle, 
  TextWidthBasis textWidthBasis = TextWidthBasis.parent, 
  TextHeightBehavior? textHeightBehavior, 
  SelectionRegistrar? selectionRegistrar, 
  Color? selectionColor
})

The following table describes the properties of the RichText widget:

TextSpan constructor

TextSpan({
  String? text, 
  List<InlineSpan>? children, 
  TextStyle? style, 
  GestureRecognizer? recognizer, 
  MouseCursor? mouseCursor, 
  PointerEnterEventListener? onEnter, 
  PointerExitEventListener? onExit, 
  String? semanticsLabel, 
  Locale? locale, 
  bool? spellOut
})

Description of some common used properties:

Some text not showing up?

Text displayed in a RichText widget must be explicitly styled

You may encounter one unexpected situation in which the text is not visible. In fact, text in a TextSpan is white in color by default, so it cannot be seen on a white background (Scaffold’s default background color). To avoid this, you need to specify the text color or use a background color that is different from white.

This example demonstrates invisible text that is accidentally created when using TextSpan:

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: const Text('Kindacode.com')),
        body: Padding(
          padding: const EdgeInsets.all(25),
          child: RichText(
            text: const TextSpan(children: [
              TextSpan(
                  text: 'Hello',
                  style: TextStyle(color: Colors.red, fontSize: 30)),
              TextSpan(
                  text: ' World',
                  style: TextStyle(fontSize: 30)), // this is invisible
            ]),
          ),
        ));
  }
}

Screenshot:

RichText alternative

You can use Text.rich, a const text widget, as an alternative to RichText. It integrates with the default text style automatically.

Example

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: const Text('Kindacode.com')),
        body: const Padding(
          padding: EdgeInsets.all(25),
          child: Text.rich(TextSpan(children: [
            TextSpan(text: 'Hello', style: TextStyle(fontSize: 40)),
            TextSpan(
                text: ' World',
                style: TextStyle(fontWeight: FontWeight.bold, fontSize: 40))
          ])),
        ));
  }
}

Screenshot:

Text.rich constructor:

Text.rich(
  InlineSpan textSpan,
  {
    Key? key,
    TextStyle? style,
    StrutStyle? strutStyle,
    TextAlign? textAlign,
    TextDirection? textDirection,
    Locale? locale,
    bool? softWrap,
    TextOverflow? overflow,
    double? textScaleFactor,
    int? maxLines,
    String? semanticsLabel,
    TextWidthBasis? textWidthBasis,
    TextHeightBehavior? textHeightBehavior,
    Color? selectionColor
  }
)

References

• RichText class (flutter.dev)
• TextSpan constructor (flutter.dev)
• Text.rich constructor (flutter.dev)
• Typography – Human Interface Guidelines (developer.apple.com)
• Typography (developer.android.com)
• Typography (material.io)

Conclusion

In this article, we went over the RichText widget and the TextSpan widget and a few examples of using them in Flutter applications. If you’d like to explore more about text stuff and other interesting things in Flutter, take a look at the following articles:

• Flutter: Making Beautiful Chat Bubbles (2 Approaches)
• Flutter: Make Text Clickable like Hyperlinks on the Web
• Flutter: Text with Read More / Read Less Buttons
• Flutter: Creating Strikethrough Text (Cross Out Text)
• Flutter Gradient Text Examples

You can also check out our Flutter category page or Dart category page for the latest tutorials and examples.