RichText Widget in Flutter | Span Text Easily

RichText Widget in Flutter | Span Text Easily

RichText Widget is very useful in Flutter. It lets the developer create a simple yet effective way of creating texts on the UI with multiple Styles to it. A very similar practice in Website and Mobile apps is to either Style a specific word in a paragraph or a sentence. In Flutter, there is no option to do this unless multiple Text Widgets are used. However, RichText widget comes into the picture here and lets you perform multiple Text Styles without having to switch many widgets.

The example in the following sections explains how to use the RichText widget easily.

RichText Widget – Basics

Use RichText with the class RichText itself. Another important Widget that has to be used as part of the RichText widget is the TextSpan widget. This is going to provide the ability to add a text and a style specific to that text.

The following section explains the available Properties of the RichText Widget.

RichText – Properties

There are a few important properties that are available for RichText.

  • text – This attribute takes the TextSpan as its value. TextSpan will provide options to provide a text followed by the style to be applied to that text.

TextSpan Properties

TextSpan class, on the other hand, has multiple properties that are very useful.

  • text – This is the string that has to be shown on the UI.
  • style – Takes a TextStyle as its value. Make sure to include all the required style that has to be applied here. Some of the available styles include fonts, color, size, and weight.
  • children – The children attribute takes in an array of TextSpan class. This is where the multiple choice of changing the text styles will be used.

Note: The usual styling procedure is to keep the text attribute of the TextSpan class with whatever is required to be shown to the user followed by the children which will, in turn, take the styled text. This way, there is not going to be multiple Text/RichText widget flooding the UI tree.

RichText – Example Application

The code below explains how the Spanning of elements can be done easily. It is very important to keep the UI tree as minimal as possible instead of adding multiple, unnecessary Text Widgets.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'RichText Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(title: Text("Sample RichText App"),),
        body: RichText(
          text: TextSpan(
            text: "Hello",
            style: TextStyle(fontSize: 30.0, color: Colors.black),
            children: <TextSpan>[
              TextSpan(text: " Coder ", style: TextStyle(color: Colors.blue)),
              TextSpan(text: " Monk! ", style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold))
            ]
          ),
        ),
      )
    );
  }
}
RichText Example App
RichText Example App

RichText – Conclusion

As mentioned in the above section, it is advisable to make use of the RichText in place of a Text Widget completely. However, make sure to not overuse this widget since it is costly to rebuild on the screen. Spanning texts is a great visual reminder to emphasize something to the user, however, overdoing will only take a negative hit.

Leave a Comment

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