如何在 canvas 上制作自定义可编辑文本框，其中背景随文本一起传播？

Question

我没有在 flutter 中使用 canvas，但我认为可以通过 canvas 实现像图片中那样的编辑文本框。背景随着文本长度的增加而扩展，如果一行中的文本长度为0则没有背景。

如果您有任何代码或建议，请帮忙。

Answer 1

这里是代码：

class TextFieldTest extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: SingleChildScrollView(
        child: Container(
          padding: EdgeInsets.symmetric(horizontal: 50),
          child: TextField(
            maxLines: 10,
            keyboardType: TextInputType.multiline,
            textAlign: TextAlign.center,
            style: TextStyle(
              wordSpacing: 5,
              height: 2,
              color: Colors.white,
              fontWeight: FontWeight.bold,
              fontSize: 26,
              background: Paint()
                ..color = Colors.blue
                ..style = PaintingStyle.stroke
                ..strokeWidth = 35
                ..strokeJoin = StrokeJoin.round,
            ),
          ),
        ),
      ),
    );
  }
}

strokeWidth 应大于 fontSize 以按您选择的颜色填充所有文本。

尝试使用它，以便最终获得更准确的结果。

如何在 canvas 上制作自定义可编辑文本框，其中背景随文本一起传播？

How to make custon editable textbox on a canvas in flutter in which background spreads with the text?

flutter

flutter-layout

flutter-canvas