如何将插入textformfield的文本转换为图像?

Question

我有Textformfield，用户可以键入文本，在一个按钮上点击我想把插入的文本转换成图像，并显示在其他一些屏幕上。

任何帮助都将是非常感激的。

我尝试使用第三方截图包，但我希望它没有第三方包或API

Answer 1

您可以通过查找小部件的RenderObject并将其转换为图像来获得某个小部件的图像。然后，您可以将此图像保存在状态中，并在其他地方使用。

下面是一个例子:

class _HomeState extends State<Home> {
final GlobalKey _globalKey = GlobalKey();
Widget? _image;
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
if (_image != null) _image!,
RepaintBoundary(
key: _globalKey,
child: TextField(),
),
TextButton(
onPressed: () async {
final boundary = _globalKey.currentContext?.findRenderObject();
if (boundary is RenderRepaintBoundary) {
final uiimage = await boundary.toImage();
final pngBytes = await uiimage.toByteData(format: ImageByteFormat.png);
setState(() {
_image = Image.memory(
Uint8List.view(pngBytes!.buffer)
);
});
}
},
child: Text('Cheese'),
)
],
),
);
}
}