extended textRelated articles

  • Flutter RichText supports image display and custom image effects
  • Flutter RichText supports custom text overflow effects
  • Flutter RichText supports custom text backgrounds
  • Flutter RichText supports special text effects
  • Flutter RichText supports text selection

We introduced Extended Text earlier, and the usual rules are shown above

UI design says, can you put a porphyrin porphyrin glitter background on that word? TextStlye, TextStlye, TextStlye, TextStlye, TextStlye, TextStlye, TextStlye

The… Where’s my Chinese?

I tried again, changed the background color to translucent, and the Chinese text finally came out, but

What the hell is this top highlight

Also stop teasing, want to see the bug go to 24335 and 24337

Say to product design

Why others can do other platforms, no matter, must support. So I went to see the issue again, last year’s issue, almost 4 months. What the hell? Fix it or not? Forget it, don’t fix it, the old man will draw it himself.

Add images to the text and we’ve done that and everything seems to be going well. If you feel a little jumpy, please read the previous article first. Thank you.

First released figure

Go directly to the paint method, and loop through again to find BackgroundTextSpan

if (ts is BackgroundTextSpan) {
        var painter = ts.layout(_textPainter);
        Rect textRect = topLeftOffset & painter.size;
        Offset endOffset;
        if (textRect.right > rect.right) {
          int endTextOffset = textOffset + ts.toPlainText().length;
          endOffset = _findEndOffset(rect, endTextOffset);
        }

        ts.paint(canvas, topLeftOffset, rect, endOffset: endOffset);
      } else if(ts.children ! =null) {
        _paintSpecialTextChildren(ts.children, canvas, rect,
            textOffset: textOffset);
      }
      textOffset += ts.toPlainText().length;
Copy the code

We have to pay attention here, because when you get a BackgroundTextSpan and you use TextPainter you only know the height and length of the entire text, you don’t know whether it’s wrapped, whether the text in it is overflowing, so when the right hand side of the text is larger than the right hand side of the text, So this line breaks or overflows. Using the _findEndOffset method, we look forward from the position of the last word in BackgroundTextSpan until we find the last position in BackgroundTextSpan where the text did not overflow

Offset _findEndOffset(Rect rect, int endTextOffset) {
    Offset endOffset = getOffsetForCaret(
      TextPosition(offset: endTextOffset, affinity: TextAffinity.upstream),
      rect,
    );
    //overflow
    if (endOffset == null|| (endTextOffset ! =0 && endOffset == Offset.zero)) {
      return _findEndOffset(rect, endTextOffset - 1);
    }
    return endOffset;
  }
Copy the code

If endOffset is null, the background can be drawn directly

  canvas.drawRect(textRect, background);
Copy the code

Otherwise it means that BackgroundTextSpan has a newline.

paint(Canvas canvas, Offset offset, Rect rect, {Offset endOffset})
Copy the code

So it is divided into three parts: 1. Offset to the right of the whole text 2. Line 3. The leftmost part of the entire text to endOffset

And it should make a lot of sense to figure out if there’s a whole row in between

      ///endOffset.y has deviation,so we calculate with text height
      ///print(((endOffset.dy - offset.dy) / _painter.height));
      var fullLinesAndLastLine =
          ((endOffset.dy - offset.dy) / _textPainterHelper.painter.height)
              .round();
Copy the code

The rest is painting, see

At this point, we have solved the problem of Background when Chinese font and number are in the same TextSpan.

But this is where the product design comes in, and this is the background of porphyrin porphyrin, right? How about a rounded corner? Can I add a shadow?

Of course. There’s nothing I can’t draw except money.

So I added clipBorderRadius rounded corners and paintBackground callbacks to BackgroundTextSpan

  ///clip BorderRadius
  final BorderRadius clipBorderRadius;

  ///paint background by yourself
  final PaintBackground paintBackground;
Copy the code

Rounded corners are easy to set. We’ve done this before. See for details

The PaintBackground callback gives you a chance to define your own background.

             if(backgroundTextSpan.clipBorderRadius ! =null) { canvas.save(); canvas.clipPath(Path() .. addRRect(backgroundTextSpan.clipBorderRadius .resolve(painter.textDirection) .toRRect(fullLineRect))); }///draw full line canvas.drawRect(
                      fullLineRect, backgroundTextSpan.background);

                  if(backgroundTextSpan.clipBorderRadius ! =null) {
                    canvas.restore();
                 }
Copy the code

As for the shadow, the official BoxDecoration is very detailed, in fact, many effects I can only see this class. We are free to look at the source can get a lot of inspiration.

Finally put onGithub Extended_TextIf there’s something you don’t understand, please let me know. Welcome aboardFlutter CandiesTogether to make cute little Flutter candiesQQ group: 181398081