Code360 powered by Coding Ninjas X Code360 powered by Coding Ninjas X
Table of contents
RichText Widget in Flutter
RichText Widget Structure
Frequently Asked Questions 
Last Updated: Mar 27, 2024

RichText Widget in Flutter

Leveraging ChatGPT - GenAI as a Microsoft Data Expert
Prerita Agarwal
Data Specialist @
23 Jul, 2024 @ 01:30 PM


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



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})
Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job


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




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.


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.


import 'package:flutter/material.dart';

void main() {

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



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 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 and ReichText widget in Flutter?
    The RichText widget displays text that can adopt different styles. The 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.


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