Flutter将小部件直接保存到图像中

Question

我有一个自定义小部件，我想保存到png图像中。我面临的问题是，在当前的实现中，我需要在屏幕上显示小部件。我想要的是将小部件直接保存到图像中，而不显示它。

作为一种变通方法，当图像在屏幕上渲染时，我会在第一个可能的时刻保存图像，然后迅速将其消除

这就是我现在保存小部件的方式：

class SomeWidget extends StatefulWidget {
const SomeWidget({
Key key,
}) : super(key: key);
@override
_ShareCocktailMockState createState() => _ShareCocktailMockState();
}
class _SomeWidgetState extends State<SomeWidget>
with AfterLayoutMixin<SomeWidget> {
GlobalKey globalKey = GlobalKey();
Future<void> _capturePng() async {
RenderRepaintBoundary boundary =
globalKey.currentContext.findRenderObject();
try {
if (boundary.debugNeedsPaint) {
print("Waiting for boundary to be painted.");
await Future.delayed(const Duration(milliseconds: 5));
return _capturePng();
}
} catch (_) {}
try {
ui.Image image = await boundary.toImage();
ByteData byteData =
await image.toByteData(format: ui.ImageByteFormat.png);
Uint8List pngBytes = byteData.buffer.asUint8List();
// SHARING IMAGE TO SOCIAL MEDIA
// CODE
// widget is presented with a dialog so I just pop it
Navigator.of(context).pop();
} catch (_) {
await Future.delayed(const Duration(milliseconds: 5));
return _capturePng();
}
}
@override
void afterFirstLayout(BuildContext context) {
_capturePng();
}
@override
Widget build(BuildContext context) {
return RepaintBoundary(
key: globalKey,
child: SuperFancyWidget(),
);
}
}

afterFirstLayout来自https://pub.dev/packages/after_layout包装

Answer 1

屏幕截图包(https://pub.dev/packages/screenshot)已更新，现在支持捕获未显示在屏幕上的小部件。

所以下面这样的东西应该有效：

ScreenshotController screenshotController = ScreenshotController();
late File customFile;

await screenshotController
.captureFromWidget(CustomWidget())
.then((capturedImage) async {
await widgetToImageFile(capturedImage);

Future<void> widgetToImageFile(
Uint8List capturedImage,
) async {
Directory tempDir = await getTemporaryDirectory();
String tempPath = tempDir.path;
final ts = DateTime.now().millisecondsSinceEpoch.toString();
String path = '$tempPath/$ts.png';
customFile = await File(path).writeAsBytes(capturedImage);
}

现在，您应该有一个自定义文件，其中包含小部件的.png，可以随意使用。

Answer 2

如果您想将小部件保存为png图片，可以使用屏幕截图包。像这样包装小部件：

Screenshot(
controller: screenshotController,
child: Text("This text will be captured as image"),
)

有关软件包中的详细信息，请阅读Readme部分。