时间戳

首页 > 解决方案 > 如何从小部件创建图像？

flutter - 如何从小部件创建图像？

问题描述

如何创建任何特定小部件的图像文件并将其保存在外部存储目录中？

前任。创建RandomWords小部件的图像。

class RandomWords extends StatefulWidget {
  @override
  RandomWordsState createState() => new RandomWordsState();
}

class RandomWordsState extends State<RandomWords> {
  @override
  Widget build(BuildContext context) {
    final wordPair = WordPair.random();
    return Text(wordPair.asPascalCase);
  }
}

标签： flutterflutter-layout

解决方案

如果您的意思是如何为给定小部件制作屏幕截图，我建议您阅读 Medium 上的这篇文章：在 Flutter 中拍摄某个小部件的“屏幕截图”

特别是该takeScreenshot()方法可能会引起您的兴趣：

takeScreenShot() async {
  RenderRepaintBoundary boundary =
      previewContainer.currentContext.findRenderObject();
  double pixelRatio = originalSize / MediaQuery.of(context).size.width;
  ui.Image image = await boundary.toImage(pixelRatio: pixelRatio);
  ByteData byteData = await image.toByteData(format: ui.ImageByteFormat.png);
  Uint8List pngBytes = byteData.buffer.asUint8List();
  setState(() {
    _image2 = Image.memory(pngBytes.buffer.asUint8List());
  });
  final directory = (await getApplicationDocumentsDirectory()).path;
  File imgFile = new File('$directory/screenshot.png');
  imgFile.writeAsBytes(pngBytes);
  final snackBar = SnackBar(
    content: Text('Saved to ${directory}'),
    action: SnackBarAction(
      label: 'Ok',
      onPressed: () {
        // Some code
      },
    ),
  );

  Scaffold.of(context).showSnackBar(snackBar);
}

推荐阅读