将您的小部件导出为具有抖动的图像

几天前,我在弄乱flutter时,以为flutter中的所有内容都是逐像素渲染的,因此必须有一种方法可以将渲染的东西导出为字节,然后使用它存储到文件或通过转换为base64字符串进行共享。 最明显的方法是使用画布并导出渲染的图像数据。 另一种方法是使用RepaintBoundary小部件,然后使用其“ toImage”方法为小部件的当前状态捕获图像。

如何在您的应用程序中做到这一点?

让我们来看看如何做。 首先,您声明一个全局键,然后将其分配给我们的RepaintBoundary。 在我们的RepaintBoundary内部,我们将传递需要转换为图像的小部件,然后创建一个名为capturePng的函数,该函数将解析Future 类型的future。

在其中,我们创建一个RenderRepaintBoundary对象,并通过currentContext将其分配给RenderObject。

  RenderRepaintBoundary边界= _globalKey.currentContext.findRenderObject(); 

之后,我们通过RenderRepaintBoundary对象的toImage()方法获取图像。

要使用toImage,渲染对象必须经过绘制阶段(即debugNeedsPaint必须为false)。

  ui.Image image =等待boundary.toImage(pixelRatio:3.0); 

获取原始图像数据后,我们将其转换为字节码,然后,将字节码转换为Unit8List,我们可以使用它来获取base64字符串。

  ByteData byteData = 
 等待image.toByteData(format:ui.ImageByteFormat.png); 
  Uint8List pngBytes = byteData.buffer.asUint8List(); 
 字符串bs64 = base64Encode(pngBytes); 

获取图像后,您可以随意使用数据。 听到的是一个完整的main.dart,可以直接测试代码,也可以从下面给出的链接中克隆GitHub存储库

https://github.com/parth181195/flutter_widget_to_image

今天就这些了。下周,我将在ScopedModel发布另一个博客 请务必提及您对颤振所做的所有令人敬畏的事情。