Rich Text Flutter Widget Example

In this article, you will learn how to use rich text widget in flutter applications. Rich Text means we can display text with more options. Using Rich Text Widget, we can display single text with different styles.

Rich Text is a widget which is used to display text with multiple styles with the help of TextSpan widgets. Each TextSpan widget can set its own style. Text might break across multiple lines or might all be displayed on the same line which depend on layout constraints.

There are many properties in rich text flutter widget. children is used to set child widgets below rich text widget in the tree. text is used to display text in rich text widget. key property is used to control how one widget replaces other widget in the tree.

textAlign property is used to display how the text should be aligned horizontally. maxLines is used to control maximum number of lines can be used to expand and wrap text. locale is used to display various fonts for text which depend on language used.

textDirection property is used to display text from left-to-right or right-to-left. textScaleFactor is used to display text with relative size of the font. textHightBehaviour is used to control how text will be highlighted. textWidthBasis is used to control width of single line of text is being measured.

overflow property is used to control text in case of overflow. softWrap property takes boolean value as the object. runtimeType is used to represent runtime type of the object.

 

Rich Text Flutter

RichText(
    text: TextSpan(
        text: ‘Don\’t have an account?’,
        style: TextStyle(color: Colors.black, fontSize: 18),
        children: <TextSpan>[
            TextSpan(
                text: ‘ Sign up’,
                style: TextStyle(color: Colors.deepOrange, fontSize: 18),
            )
        ]
    ),
),
 
rich text flutter
 
RichText(
    text: TextSpan(
        text: ‘GitHub is a development platform inspired by the way you work. From ‘,
        style: TextStyle(
            color: Colors.grey,
            fontSize: 22),
            children: <TextSpan>[
                TextSpan(text: ‘open source’,
                    style: TextStyle(
                        color: Colors.black,
                        fontSize: 22,
                        fontWeight: FontWeight.bold,
                        decoration: TextDecoration.underline
                    ),
                ),
                TextSpan(
                    text: ‘ to ‘,
                    style: TextStyle(
                        color: Colors.grey,
                        fontSize: 22
                    )
                ),
                TextSpan(
                    text: ‘business,’,
                    style: TextStyle(
                        color: Colors.black,
                        fontSize: 22,
                        fontWeight: FontWeight.bold,
                        decoration: TextDecoration.underline
                    ),
                ),
                TextSpan(
                    text: ‘ you can host and review code, manage projects, and build software alongside 36 million developers.’,
                    style: TextStyle(
                        color: Colors.grey,
                        fontSize: 22
                    )
                )
            ]
        ),
    ),
)
 
 

Leave a Reply