flutter - 如何在Flutter中创建文本切口？(How to create a Text cutout in Flutter?)

Question

I am trying to create a Text Box where text colour should be transparent and if I change the colour of the background containter..the text colour should change too.

(我正在尝试创建一个文本框，其中文本颜色应该是透明的，并且如果我更改背景容器的颜色，文本颜色也应该更改。)

For example, consider this image

(例如，考虑这张图片)

Here, I have a stack with first element a container with colour= black because of which I want MY TEXT to be black too.

(在这里，我有一个第一个元素为colour= black的容器，因此我也希望我的文本也为黑色。)

I don't want to manually set the font-colour of the text every time I change the colour of the 1st container.. as I may plan to fill the container with an animation later and I want the same animation to run on the text also.

(我不想每次更改第一个容器的颜色时都手动设置文本的字体颜色。因为我可能打算以后用动画填充容器，并且希望在文本上运行相同的动画也。)

I tried setting the text foreground colour to transparent and background colour to orange but that did not help, the text also became orange and hence invisiable.

(我尝试将文本前景色设置为透明，将背景色设置为橙色，但这无济于事，文本也变为橙色，因此看不见。)

  ask by Anirudh Bagri translate from so

Answer 1

You will need to use a CustomPainter with a TextPainter and a blending mode for that.

(您将需要使用带有TextPainter的CustomPainter以及混合模式。)

In your widget tree:

(在小部件树中：)

return Container(
      color: Colors.black,
      height: 40.0,
      child: Center(
        child: CustomPaint(
          painter: MyTextPainter(text: 'Hello'),
        ),
      ),
    );

Your custom text painter:

(您的自定义文字画家：)

class MyTextPainter extends CustomPainter {
  MyTextPainter({this.text});

  final String text;

  @override
  void paint(Canvas canvas, Size size) {
    TextPainter textPainter = TextPainter(
      text: TextSpan(
        text: text,
        style: TextStyle(
          fontSize: 30.0,
          fontWeight: FontWeight.w600,
        ),
      ),
      textDirection: TextDirection.ltr,
    );
    textPainter.layout();

    // Draw text
    final textOffset = size.center(Offset.zero) - textPainter.size.center(Offset.zero);
    final textRect = textOffset & textPainter.size;

    // Your text box (orange in your example)
    final boxRect = RRect.fromRectAndCorners(textRect.inflate(5.0));
    final boxPaint = Paint()
      ..color = Colors.orange
      ..blendMode = BlendMode.srcOut;

    canvas.saveLayer(boxRect.outerRect, Paint());
    textPainter.paint(canvas, textOffset);
    canvas.drawRRect(boxRect, boxPaint);
    canvas.restore();
  }

  @override
  bool shouldRepaint(MyTextPainter oldDelegate) => true;
}