将 TextField 小部件的内容及其样式导出为 flutter 中的图像

Question

过去两天我一直在努力实现以下目标：

我有一个要求，TextField 有文本，样式是背景颜色、行距和字体大小。我能够在 iOS 模拟器上成功导出内容（尚未尝试 Android）。 H然而，当内容很长时，只有可见部分被导出。我已经用 SingleChildScrollView 包裹了 RepaintBoundary，也用 SingleChildScrollView 包裹了 TextField，但没有成功。请参阅下面的代码并建议可以采取哪些措施来实现上述要求。

这是我的小部件

      body: SingleChildScrollView(
    child: RepaintBoundary(
      key: _globalKey,
      child: Center(
        child: Container(
          // color: backgroundColor,
          decoration: BoxDecoration(
            color: backgroundColor,
            borderRadius: BorderRadius.circular(
                8.0), // Add this line to set the rounded corners
          ),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Stack(
                children: [
                  CustomPaint(
                    size: Size(
                        double.infinity,
                        MediaQuery.of(context).size.height *
                            0.9), // Adjust height as needed
                    painter: const NotebookLinePainter(),
                  ),
                  Positioned.fill(
                      child: TextField(
                    controller: myController,
                    style: TextStyle(
                      fontSize: fontSize,
                      height: lineHeight,
                      color: textColor,
                    ),
                    decoration: InputDecoration(
                      hintText: AppLocalizations.of(context)!
                          .det_hint, //"Insert your message",
                      border: OutlineInputBorder(
                        borderRadius: BorderRadius.circular(
                            16.0), // Add this line to set the rounded corners
                      ),
                      contentPadding:
                          const EdgeInsets.all(12), // Add padding
                    ),
                    scrollPadding: const EdgeInsets.all(1.0),
                    keyboardType: TextInputType.multiline,
                    maxLines: null,
                    autofocus: true,
                    textAlign: TextAlign.justify,
                    // controller: myController,

                    onChanged: (value) {
                      // Update the Hive storage
                      // _id = args['id'];
                      // _title = args['title'];
                      currentText = value;
                      _updateNote(value);
                    },
                  ))
                ],
              ),
              // _buildExportableContent(),
            ],
          ),
        ),
      ),
    ),
  )

这是我导出到图像的函数

  Future<void> _exportToImage2() async {
try {
  FocusScope.of(context).unfocus();

  // Ensure the entire widget is laid out
  await Future.delayed(
      Duration(milliseconds: 100)); // Give it a moment to settle

  RenderRepaintBoundary boundary = _globalKey.currentContext!
      .findRenderObject() as RenderRepaintBoundary;

  // Ensure the widget is painted
  if (boundary.debugNeedsPaint) {
    await Future.delayed(
        Duration(milliseconds: 100)); // Wait until the widget is painted
  }

  // Capture the image
  ui.Image image = await boundary.toImage(pixelRatio: 3.0);
  ByteData? byteData =
      await image.toByteData(format: ui.ImageByteFormat.png);

  if (byteData == null) {
    ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(content: Text('Error creating image.')));
    return;
  }

  final Uint8List pngBytes = byteData.buffer.asUint8List();
  final directory = await getApplicationDocumentsDirectory();
  final imagePath = File('${directory.path}/exported_note.png');
  await imagePath.writeAsBytes(pngBytes);

  final result = await ImageGallerySaver.saveImage(pngBytes);
  if (result['isSuccess']) {
    ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(content: Text('Image saved to gallery!')));
  }
} catch (e) {
  ScaffoldMessenger.of(context)
      .showSnackBar(SnackBar(content: Text('Failed to export image: $e')));
}

}

谢谢你。

Answer 1

发布此问题后，我能够解决该问题。我希望我早点发布这个问题：D

我从主小部件中删除了 RepaintBoundary，

我添加了在屏幕上不可见的文本小部件，其目的只是将其导出为另一个子项

                  RepaintBoundary(
                key: _globalKey,
                child: Container(
                  width: MediaQuery.of(context).size.width,
                  // padding: const EdgeInsets.all(8.0),
                  padding: const EdgeInsets.symmetric(
                      horizontal: 16.0, vertical: 8.0),
                  color: backgroundColor,
                  child: Text(
                    myController.text,
                    textAlign: TextAlign.justify,
                    style: TextStyle(
                      fontSize: fontSize,
                      height: lineHeight,
                      color: textColor,
                    ),
                  ),
                ),
              ),

导出功能代码

  Future<void> _exportToImage3() async {
try {
  FocusScope.of(context).unfocus();

  // Ensure the entire widget is laid out
  await Future.delayed(Duration(milliseconds: 100));

  RenderRepaintBoundary boundary = _globalKey.currentContext!
      .findRenderObject() as RenderRepaintBoundary;

  // Capture the image
  ui.Image image = await boundary.toImage(pixelRatio: 1.0);
  ByteData? byteData =
      await image.toByteData(format: ui.ImageByteFormat.png);

  if (byteData == null) {
    ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(content: Text('Error creating image.')));
    return;
  }

  final Uint8List pngBytes = byteData.buffer.asUint8List();
  final directory = await getApplicationDocumentsDirectory();
  final imagePath = File('${directory.path}/exported_note.png');
  await imagePath.writeAsBytes(pngBytes);

  final result = await ImageGallerySaver.saveImage(pngBytes);
  if (result['isSuccess']) {
    ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(content: Text('Image saved to gallery!')));
  }
} catch (e) {
  ScaffoldMessenger.of(context)
      .showSnackBar(SnackBar(content: Text('Failed to export image: $e')));
}

}