Note: The Flutter and Dart versions are as follows without special instructions:

  • Flutter version: 1.12.13+ Hotfix.5
  • Dart version: 2.7.0

Basic usage

Application is dependent on the display of the Text, so Text layout is very important, usually Text component can complete most of the demand, it can show different sizes of Text, font, color, etc., if you want to be in a sentence or a paragraph of Text display different style of the Text, the Text components can meet our requirements, You need to use RichText at this point.

RichText(
      text: TextSpan(
          style: DefaultTextStyle.of(context).style,
          children: <InlineSpan>[
            TextSpan(text: 'the old meng',style: TextStyle(color: Colors.red)),
            TextSpan(text: ', '),
            TextSpan(text: 'A programmer with attitude'),),)Copy the code

Defaulttextstyle.of (context).style, defaulttextstyle.of (context).style, Set a different style on one of the TextSpan sub-components, such as the code above that sets the text “Lao Meng” to red, as follows:

When the text has more lines, you can set its alignment:

RichText(
	textAlign: TextAlign.end,
	...
)
Copy the code

The effect of textalign.start:

Textalign.center looks like this:

Textalign.end looks like this:

Gesture interaction

Of course, we can set other styles, like size, italics, and even click effects,

RichText(
      text: TextSpan(
          style: DefaultTextStyle.of(context).style,
          children: <InlineSpan>[
            TextSpan(text: 'Login is deemed consent'),
            TextSpan(
              text: 'XXX Service Agreement', style: TextStyle(color: Colors.red), recognizer: TapGestureRecognizer().. onTap = () { }, ), ]), )Copy the code

Recognizer attribute specifies gesture interaction, type is GestureRecognizer, GestureRecognizer is an abstract class, generally use the subclasses TapGestureRecognizer click interaction.

Read more:

  • Overview of the Flutter series
  • Expand and Flexible of Flutter Widgets
  • Flutter AnimatedList Widgets
  • Flutter SliverAppBar Widgets
If this article is helpful to you, PLEASE give me a “like” and follow my official account. Thank you very much.