This is the 25th day of my participation in Gwen Challenge

preface

Earlier we talked about the display effect of various Text property styles in Flutter. In this article we will go a little deeper into the source code of Text and the use of rich Text. Finally, we will talk about the application of selected Text.

RichText

The Text source

Before we look at rich text, let’s look at the previous articleTextSource code, which we actually saw in the previous article when we demonstrated line height arguments even though we were usingText, but what you see in the Widget tree when rendering isRichText.

Text source code

What are the reasons for this? Let’s take a look at the source code



First of all,TextInherited fromStatelessWidgetLet’s go straight to itbuildMethod can.

Here we see the circled part of the comment above, saying that RichText gives us better control over text styles

  • The text-build method



As you can see above 👆🏻, the build method ultimately returnsresult(550 lines), whileresultWhat we create isRichTextObject, normally we don’t attach semantic labels to textsemanticsLabel, so it goes straight backRichTextThe Widget.

Now you can see why we are writing a Text Widget but are actually RichText widgets

Simple rich text

Above we know why, below we from a simple rich text into the originalRichText 吧



👆🏻 above effect if used aloneTextWrite whether we want to nest one externallyThe Row + 3 TextWe also have to worry about line breaks, which is a little bit more troublesome if we useRichText, you don’t need to consider so much, just care about the style.

RichText(
  text: TextSpan(
    text: 'Flutter Widgets already ',
    children: [
      TextSpan(
        text: '25'.// Set a personalized overlay style
        style: TextStyle(
          fontWeight: FontWeight.bold,
          fontSize: 18,),),// Reuse the upper-level common style
      TextSpan(text: Series of articles)],// Set a common style
    style: TextStyle(
      color: Colors.blue,
    ),
  ),
)
Copy the code

Here we are mainly concerned with style Settings. There are two points to note:

  • In mind, we should understand the nested relation of TextSpan
  • Understand the inheritance and overlay relationship of style

TextSpan

We used TextSpan, so let’s take a look at its properties.

On the source code



Here we seeTextSpanInherited fromInlineSpanTo achieve theHitTestTarget(Hit detection) andMouseTrackerAnnotation(mouse tracking), attributes are also very simple, commonly used may be the first 4, and then the first 3 we understand the use of, let’s look at the fourth.

Local gesture detection

Now what if I change the number 25 to red and add click events? This is where the fourth attribute recognizer comes in.

// Click the gesture detector
late TapGestureRecognizer tapRecognizer;
@override
voidinitState() { tapRecognizer = TapGestureRecognizer().. onTap = _handleTap;super.initState();
}

/// Handle click
void _handleTap() {
  / / print
  print('tapRecognizer 25');
  // Set the vibration effect
  HapticFeedback.vibrate();
}
// Here is only part of the code for 25
TextSpan(
  text: '25'.// Set a personalized overlay style
  style: TextStyle(
    fontWeight: FontWeight.bold,
    fontSize: 18,
    color: Colors.red,
  ),
  // Set click detector
  recognizer: tapRecognizer,
)
Copy the code
  • According to the effect

  • Click and print the following



So we can use it when we do things like user agreements and privacy policies, we can do separate styles and jumps.

WidgetSpan

Above, we just talked about the various types of text in rich text, as well as the nesting of various pictures. In the actual application of rich text, it is much more complicated than this. The examples in the article are the core solutions, which still need practical application and innovation.



What if on top of that we need to add an icon? Look at the code below

RichText(
  text: TextSpan(
    children: [
      // Flutter Logo
      WidgetSpan(child: FlutterLogo()),
      TextSpan(text: 'Flutter Widgets already '),
      TextSpan(
        text: '25'.// Set a personalized overlay style
        style: TextStyle(
          fontWeight: FontWeight.bold,
          fontSize: 18,
          color: Colors.red,
        ),
        recognizer: tapRecognizer,
      ),
      // Link icon
      WidgetSpan(
        child: Icon(
          Icons.link,
          size: 16,
          color: Colors.blue,
        ),
      ),
      // Reuse the upper-level common style
      TextSpan(text: Series of articles),
      // Copy the icon
      WidgetSpan(
        child: Icon(
          Icons.copy,
          size: 16,
          color: Colors.grey,
        ),
      ),
    ],
    // Set a common style
    style: TextStyle(
      color: Colors.blue,
    ),
  ),
)
Copy the code

This is just a demonstration, but in a real project it will be parsed based on the text protocol delivered and then generate the corresponding Widget combination

Text.rich

Another way to create rich Text is to use text.rich. Let’s take a look at the code

Text.rich(
  TextSpan(
    children: [
      WidgetSpan(child: FlutterLogo()),
      TextSpan(text: 'Flutter Widgets already '),
      TextSpan(
        text: '25'.// Set a personalized overlay style
        style: TextStyle(
          fontWeight: FontWeight.bold,
          fontSize: 18,
          color: Colors.red,
        ),
        recognizer: tapRecognizer,
      ),
      WidgetSpan(
        child: Icon(
          Icons.link,
          size: 16,
          color: Colors.blue,
        ),
      ),
      // Reuse the upper-level common style
      TextSpan(text: Series of articles),
      WidgetSpan(
        child: Icon(
          Icons.copy,
          size: 16,
          color: Colors.grey,
        ),
      ),
    ],
    // Set a common style
    style: TextStyle(
      color: Colors.blue,
    ),
  ),
)
Copy the code

A small summary

This is the end of RichText. We have covered the basic styles in the previous two articles, which can be reviewed in this column.

SelectableText

The text shown above cannot be copied. In actual projects, some content text needs to support users to choose to be copied, so we need to changeTextChange intoSelectableText

The code shown

SelectableText(
  "Text - ZeroFlutter",
  style: TextStyle(
    // Color blue
    color: Colors.blue,
    / / font size 24
    fontSize: 24,),)Copy the code

Use restrictions

In practice, you will find that you can no longer specify the overflow style, which is clipped out by default.



Because considering that copying must operate on all text, if we overflow the style is… Then copy out is the style of presentation, certainly does not meet the requirements.

So in the actual project, if it is long press copy all can be usedText, select Copy yesSelectableText 。

SelectableText.rich

As with text. rich, to use rich Text, use selecTableText. rich directly.

But there’s a hint here that we can’t use WidgetSpan, we can only use TextSpan

SelectableText.rich(
  TextSpan(
    children: [
      // WidgetSpan(child: FlutterLogo()),
      TextSpan(text: 'Flutter Widgets already '),
      TextSpan(
        text: '25'.// Set a personalized overlay style
        style: TextStyle(
          fontWeight: FontWeight.bold,
          fontSize: 18,
          color: Colors.red,
        ),
        recognizer: tapRecognizer,
      ),
      // WidgetSpan(
      // child: Icon(
      // Icons.link,
      // size: 16,
      // color: Colors.blue,
      / /),
      // ),
      // Reuse the upper-level common style
      TextSpan(text: Series of articles),
      // WidgetSpan(
      // child: Icon(
      // Icons.copy,
      // size: 16,
      // color: Colors.grey,
      / /),
      // ),].// Set a common style
    style: TextStyle(
      color: Colors.blue,
    ),
  ),
)
Copy the code

Source warehouse

Based on the latest version of Flutter 🔥

  • Flutter Widgets warehouse

Refer to the link

  • RichText (Flutter Widget of the Week)
  • Flutter-RichText
  • Flutter-SelectableText

Pay attention to column

  • This article has been included in the column at 👇 below, you can follow it directly
  • Read more | The series continues to be updated

👏 welcome to like ➕ collect ➕ pay attention, please feel free to comment on 👇 if you have any questions, I will reply as soon as possible