Table of contents
1.
Introduction
2.
RichText Widget in Flutter
2.1.
RichText Widget Structure
2.2.
Syntax
3.
Properties
4.
Example
4.1.
Code
4.2.
Output
5.
Frequently Asked Questions 
6.
Conclusion
Last Updated: Mar 27, 2024

RichText Widget in Flutter

Career growth poll
Do you think IIT Guwahati certified course can help you in your career?

Introduction

Whenever we build anything in Flutter, it will be inside a widget. Widgets describe how your app view should look with their current configuration and state. When we alter the code, the widget rebuilds its description by calculating the difference between the previous and the current widget to determine the minimal changes for rendering in the app's UI(User Interface).

 

Widgets in Flutter are nested with each other to build the Flutter app. It means the root of our app is itself a widget, and down is a widget also. For example, a widget can display something, define design, handle interaction, etc. In this blog, we will learn about the RichText Widget in Flutter, along with an example.

RichText Widget in Flutter

Sometimes, we want to show a paragraph or a line with multiple styles such as bold, underlined, italicized, different font or colors, etc. In that case, we use the RichText widget that allows us to perform multiple test styles without switching several widgets.

 

RichText is a handy widget in Flutter, displaying a paragraph of text on the UI with various styles. We can have different styles inside the widget by giving it a tree of TextSpan widgets. Each TextSpan can set its style by overriding the default style.

RichText Widget Structure

RichText uses TextSpan as a parent object with its style property and a text parameter which we can input the actual text. The parent object can have several TextSpan objects as children who have their style property that can be applied to the respective text.

 

RichText Widget Structure

Source: https://medium.com/flutter-community/make-text-styling-more-effective-with-richtext-widget-b0e0cb4771ef

Syntax

The syntax for using RichText in Flutter is as follows:-

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

Properties

Let us discuss the properties we can use for customizing the RichText widget in Flutter.

Property

Type

Description

children List<Widget> The widgets below this widget in the tree.
hashCode int The hash code for the object. 
runtimeType Type A representation of the runtime type of the object.
key Key It controls how a widget replaces another widget in the tree.
text String The text to be displayed in the widget.
textAlign TextAlign Controls the text alignment.
textDirection TextDirection It decides the direction of the text.
softWrap bool Determines whether the text should break at the soft line breaks.
overflow TextOverflow It determines how a visual overflow must be handled
textScaleFactor double It is used to determine the relative size of the font.
maxLines int It controls the maximum number of lines that can be there for the text to expand and wrap.
locale Locale It controls the font of the text depending on the language used.
strutStyle StructStyle It defines the minimum line height (struct)
textHeightBehavior TextHeightBehavior Defines how to apply TextStyle.height over and under text.
textWidthBasis TextWidthBasis Defines how to measure the width of the rendered text.

Now that you have got a basic understanding of the RichText widget in Flutter, let's see how we can use this widget in our applications.

Example

Let's look at an example to learn how to use RichText Widget in Flutter. In this example, we will display the text "RichText in Flutter" with multiple styles.

Code

import 'package:flutter/material.dart';

void main() {
 runApp(CodingNinjas());
}

class CodingNinjas extends StatelessWidget{
 Widget build(BuildContext context){
   return MaterialApp(
     home: Center(
         child: RichText(
           text: TextSpan(
             style: TextStyle(color: Colors.blue, fontSize: 42),
             children: <TextSpan>[
               TextSpan(text: 'RichText Widget in ', style: TextStyle(color: Colors.orange)),
               TextSpan(text: 'Flutter', style: TextStyle(decoration: TextDecoration.underline))
             ],
           ),
           textAlign: TextAlign.center,
         )
     ),
   );
 }
}

Output

 

First, we have to create a stateless widget as the main widget of the app. In this widget, we will place the RichText widget. In this example, there are two inner TextSpan widgets. The first one uses the orange color, and The second one uses the underline decoration. The color of the second inner TextSpan widget is blue as it uses the outer TextSpan's style.
 

Are you confused about whether to learn Flutter or React Native? Check out the blog Flutter vs. React Native: Which would take you further as a Cross-Platform Developer?

Frequently Asked Questions 

  1. What is the alternative to RichText widget in Flutter?
    The Text.rich widget can be used as an alternative to the RichText widget. It integrates with the default text style automatically.
     
  2. What is the default textAlign value?
    The default textAlign value is TextAlign.start.
     
  3. What is the difference between Text.rich and ReichText widget in Flutter?
    The RichText widget displays text that can adopt different styles. The Text.rich constructor allows us to style numerous spans with the default text style.
     
  4. What is the default overflow value?
    The default textAlign value is TextOverflow.clip.
     
  5. Text displayed in a RichText widget in Flutter must be implicitly or explicitly styled?
    Text displayed in a RichText widget in Flutter must be styled explicitly styled.

Conclusion

In this article, we have extensively discussed the RichText Widget in Flutter, along with an example. We saw how the RichText widget in Flutter helps make the text's appearance more attractive and gives developers more options to implement the text.


We hope that this blog has helped you enhance your knowledge regarding the RichText Widget in Flutter and if you would like to learn more, check out our article The growing demand for Google's Flutter. Do upvote our blog to help other ninjas grow. Happy Coding!

Live masterclass