在 TextField Flutter 中将圆角颜色背景设置为文本答案

【问题标题】：Set rounded color background to text in TextField Flutter在 TextField Flutter 中将圆角颜色背景设置为文本
【发布时间】：2021-11-17 07:28:47
【问题描述】：

我希望我在 Textfield 中的文本背景看起来像这样：

但是有了这段代码：

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

我有这个结果：

两者之间没有填充、圆角和透明线...

我该怎么做？

编辑：

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

编辑：

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

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

【问题讨论】：

没有资格作为答案，但有明确的改进：dartpad.dev/… 我相信解决方案将涉及 CustomPainter，因为气泡的合并效果。
@happy_san 你能提供答案吗？
如果我得到答案，我会发布。
有人在stackoverflow.com/questions/64354364/…之前提出过这个要求
您想修改您提供的 TextStyle 以驱动您或尝试不同的方法来获得相同的结果？

标签： flutter dart text textfield paint

【解决方案1】：

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

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,
    ))

笔画宽度定义了文本周围区域的“粗细”。虽然准确地说，内角（靠近单词'industry'）不是圆角的，我怀疑文本背景可以解决这个问题。

另外请注意，如果您的目标是 Web，则可能需要使用 Skia 渲染器而不是 HTML 渲染器 (https://stackoverflow.com/a/69975665/440696) 以避免以下伪影：

【讨论】：

感谢您的回答。请查看修改

【解决方案2】：

于是我找到了这篇文章https://medium.com/@pinkesh.earth/flutter-quick-tip-how-to-set-text-background-color-with-curve-d40a2f96a415 它描述了如何使用 textstyle 看起来像你想要的，但它并不完全像那样工作，我不知道为什么。它在前一行的上方绘制下一行的背景。

我设法通过堆叠两个文本字段（一个具有透明文本，另一个具有透明背景）来解决它（错误？）。

结果：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  final myControllerName = TextEditingController();
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        theme: ThemeData(
            inputDecorationTheme: const InputDecorationTheme(
          fillColor: Colors.transparent,
          filled: true,
          focusedBorder: UnderlineInputBorder(
              borderSide: BorderSide(color: Colors.transparent)),
          enabledBorder: UnderlineInputBorder(
            borderSide: BorderSide(color: Colors.transparent),
          ),
          border: UnderlineInputBorder(
            borderSide: BorderSide(color: Colors.transparent),
          ),
        )),
        debugShowCheckedModeBanner: false,
        home: Scaffold(
            body: Center(
                child: Stack(
          children: [
            IntrinsicWidth(
              child: TextField(
                controller: myControllerName,
                style: TextStyle(
                    color: Colors.transparent,
                    fontWeight: FontWeight.w600,
                    fontSize: 20,
                    background: Paint()
                      ..strokeWidth = 25
                      ..color = Colors.blue
                      ..style = PaintingStyle.stroke
                      ..strokeJoin = StrokeJoin.round),
                keyboardType: TextInputType.multiline,
                maxLines: null,
                textAlign: TextAlign.center,
              ),
            ),
            IntrinsicWidth(
              child: TextField(
                controller: myControllerName,
                style: const TextStyle(
                    color: Colors.white,
                    fontWeight: FontWeight.w600,
                    fontSize: 20,
                    backgroundColor: Colors.transparent),
                keyboardType: TextInputType.multiline,
                maxLines: null,
                textAlign: TextAlign.center,
              ),
            )
          ],
        ))));
  }
}

【讨论】：

感谢您的回答。这正是我几天前在发放赏金之前发现的。我用 AbsorbPointer 包装了第一个文本字段以避免冲突。很抱歉，我无法接受这种解决方法，因为我正在寻找定制的油漆解决方案。我将根据您的解决方案编辑我的问题。

【解决方案3】：

只需提供所需的strokeWidth 值，它就可以正常工作。 Output Image

style: TextStyle(
        background: Paint()
          ..strokeWidth = 17
          ..color = Colors.blue
          ..strokeJoin = StrokeJoin.round
          ..strokeCap = StrokeCap.round
          ..style = PaintingStyle.stroke,

        color: Colors.black,
      )

【讨论】：

感谢您的回答。请查看修改
使用 html 渲染器在 web 上不起作用

【解决方案4】：

这样做：

style: TextStyle(
              background: Paint()..color = Colors.blue
                ..strokeJoin = StrokeJoin.round
                ..strokeCap = StrokeCap.round
                ..style = PaintingStyle.stroke
                ..strokeWidth = 30.0,
              color: Colors.white,
            ),

【讨论】：

感谢您的回答。请查看修改

【解决方案5】：

我创建了一个名为 rounded_background_text 的包来实现这一目标

https://pub.dev/packages/rounded_background_text

用法：

import 'package:rounded_background_text/rounded_background_text.dart';

RoundedBackgroundText(
  'A cool text to be highlighted',
  style: const TextStyle(fontWeight: FontWeight.bold),
  backgroundColor: Colors.white,
),

还支持文本字段

【讨论】：

【解决方案6】：

试试这样的

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

【讨论】：

尝试指定keyboardType属性
不幸的是，它不能用这个来完成。请看我的截图