将圆形颜色背景设置为 TextField Flutter 中的文本

Question

我希望 Textfield 中的文本背景如下所示：

但是用这段代码：

     style: TextStyle(
              background: Paint()..color = Colors.blue
                ..style = PaintingStyle.fill,
              color: Colors.white,
            ),

我有这个结果：

没有填充，没有圆角，两者之间有一条透明线......

我怎样才能做到这一点 ？

编辑 ：

@Csaba Mihaly 提供了另一种方法TextStyle，但这是我想避免的解决方法。我正在寻找定制油漆解决方案

编辑 ：

根据提供的答案，可以使用 PaintStyle.lines，但它不是 100% 匹配预期结果（第一个屏幕）：

无论文本大小如何，为了填充空白，笔画宽度必须更大，正如我所看到的。它将渲染一个大的填充和角半径。就我而言：

Answer 1

如果您添加..strokeWidth = 20到样式中，您的代码片段将起作用，例如：

Text(
    'Lorem Ipsum is simply dummy text of the printing and typesetting industry. ',
    textAlign: TextAlign.center,
    style: TextStyle(
     background: Paint()
       ..color = Colors.blue
       ..strokeWidth = 20
       ..strokeJoin = StrokeJoin.round
       ..strokeCap = StrokeCap.round
       ..style = PaintingStyle.stroke,
     color: Colors.white,
    ))

描边宽度定义了文本周围区域的“粗细”。虽然准确地说，内角（看“行业”一词附近）不是圆形的，但我怀疑文本背景可以解决这个问题。

另请注意，如果您的目标是 Web，则可能需要使用 Skia 渲染器而不是 HTML 渲染器（/sf/answers/4898296581/）以避免以下问题：

Answer 2

尝试这样的事情

TextField(
  keyboardType: TextInputType.multiline
  decoration: InputDecoration(
      border: OutlineInputBorder(
        borderRadius: BorderRadius.all(<value>),
      ),

您可以在这里找到其他示例https://stacksecrets.com/flutter/flutter-textfield-decoration-in-depth#How_To_Decorate_Border_Of_TextField