在RichText小部件中，为TextSpan添加边框

Question

我有一个包含一些的RichText小部件。我想在TextSpan小部件周围放置一个边框。

RichText(
  text: TextSpan(
    style: textStyle,
    children: [ ], // code has more TextSpan widgets as children
  ),

这是我在Flutter中想要实现的效果示例。

- S.D.

Answer 1

Paint paint = Paint()
  ..color = Colors.blue
  ..style = PaintingStyle.stroke
  ..strokeCap = StrokeCap.round
  ..strokeWidth = 2.0;

RichText(
                    text: TextSpan(children: [
                  TextSpan(text: '123'),
                  TextSpan(text: '456', style: TextStyle(background: paint)),
                  TextSpan(text: '789')
                ]))

- Andrii Turkovskyi

---

我们如何在边框和文本之间添加一些填充？ - Raul Marquez

Answer 2

如果您想要做更有趣的事情，比如添加内边距，请使用WidgetSpan。

Text.rich(
  TextSpan(
    text: 'Lorem ipsum',
    children: [
      WidgetSpan(
        alignment: PlaceholderAlignment.middle,
        baseline: TextBaseline.ideographic,
        child: Container(
          margin: const EdgeInsets.symmetric(horizontal: 2),
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(12),
            border: Border.all(color: Colors.blue, width: 1),
          ),
          child: const Text('dolor sit amet,'),
        ),
      ),
      const TextSpan(text: 'consectetur'),
    ],
  ),
);

- Larry McKenzie