RichText Widget – Flutter Widget Guide By Flutter Agency

RichText Widget – Flutter Widget Guide By Flutter Agency

In flutter, there was no option to apply different styles to specific words in a paragraph or a sentence until the RichText Widget comes into the picture.

What is RichText Widget?

RichText Widget in flutter is used to show a paragraph of text with multiple styles. It will allow you to perform multiple Text Styles without having to switch many widgets.

The constructor of the RichText Widget will look like below :

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,
 });

Below, the section will explain how to use the RichText Widget easily. Inside the widget user can have different styles by having multiple TextSpan Widgets which can set their own style.

Few properties that are available for RichText Widget is as listed below :

1. text: This property takes the TextSpan as it’s valued and it will provide options to a text followed by the style to be applied to that text.

2. textAlign: This property is used to set text alignment. Default value is TextAlign.start.

3. textDirection: This property is used to set the direction of the text.

4. overflow: This property is used to show how visual overflow should be handled.Defaults to TextOverflow.clip

5. textScaleFactor: The number of font pixels for each logical pixel. Defaults to 1.0.

6. softWrap: Whether the text should break at soft line breaks. Defaults to true.

7. maxLines: Maximum number of lines for the text to span.

8. locale: The locale of the displayed text.

On the other hand, multiple properties of TextSpan class is as below :

1. text: It is the property that has to be shown on the UI.

2. style: It will take takes a TextStyle as its value. here user needs to declare all the required style has to be applied here. some properties include fonts, color, size, and weight.

3. children: This attribute takes in an array of TextSpan class. This is where the multiple choice of changing the text styles will be used.

The code snippet will look like as below :

RichText(
        text: TextSpan(
          style: TextStyle(color: Colors.black, fontSize: 26),
          children: <TextSpan>[
            TextSpan(text: 'Hello ', style: TextStyle(fontSize: 30.0, color: Colors.black)),
            TextSpan(text: 'Rich ', style: TextStyle(color: Colors.blue)),
            TextSpan(
                text: 'TextExample',
                style: TextStyle(color: Colors.black,
                                 fontSize: 30,
                                 fontWeight: FontWeight.bold))
          ],
        ),
      ),

It will give us output like below :

RichText Widget Example

Need more help regarding Flutter Development?
Don’t hesitate to contact us !!!

FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget Guide, Flutter Projects, Code libs and etc.

FlutterAgency.com is one of the most popular online portal dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge on Flutter.