PDF 문서에서 사용하기 위해 QRImage를 .png로 렌더링하는 방법

Question

.png로 변환하고 싶은 다음 QR 이미지가 있습니다. 몇 년 전의 stackoverflow에 대한 유사한 게시물이 있지만 버튼을 사용하여 앱에서 가질 수없는 이미지를 클릭하고 가져옵니다. QR을 그리는 코드는 다음과 같습니다. 내 pdf에 추가 할 수 있도록 .png로 변환하는 데 도움을 주시면 감사하겠습니다.

Widget getQRImage() {
if (this.showQR) {
  return QrImage(
    data: jsonEncode({
      "name": _name,
      "email": _email,
      "image": imageUrl,
     
    }),
    version: QrVersions.auto,
    size: 200,
    gapless: false,
    embeddedImage: new AssetImage('assets/logo.png'),
    embeddedImageStyle: QrEmbeddedImageStyle(
      size: Size(50, 50),
    ),
    backgroundColor: StateContainer.of(context).curTheme.primary,
    errorStateBuilder: (cxt, err) {
      return Container(
        child: Center(
          child: Text(
            "Uh oh! Something went wrong...",
            textAlign: TextAlign.center,
          ),
        ),
      );
    },
  );
} else {
  return Container();
}

}

편집하다:

이것은 답변을 기반으로 한 내 위젯의 모양이지만 더 이상 내 PDF를로드 할 수 없습니다. 내 위젯이 아무것도 반환하지 않기 때문에 잘못 되었습니까?

 pw.Widget _showQR(pw.Context context) {
    pw.Center(
      child: pw.Paragraph(text: "Your QR", style: pw.TextStyle(fontSize: 18)));

    pw.Center(child: pw.BarcodeWidget(
    data: jsonEncode({
    "name": "_name",
    "email": "_email",
   // "image": "imageUrl",

    }),
    width: 150,
    height: 150,
    barcode: pw.Barcode.qrCode(),
    ),);
    pw.Padding(padding: const pw.EdgeInsets.all(10));
  }

Answer 1

pdf에 qr 코드를 그리려면 pw.BarcodeWidget을 사용하면됩니다. 다음은 예제 코드입니다.

Future<Uint8List> generateDocument() async {
  final pw.Document doc = pw.Document();

  doc.addPage(pw.MultiPage(
      pageFormat: PdfPageFormat.a4,
      crossAxisAlignment: pw.CrossAxisAlignment.start,
      header: (pw.Context context) {
        if (context.pageNumber == 1) {
          return null;
        }
        return pw.Container(
            alignment: pw.Alignment.centerRight,
            margin: const pw.EdgeInsets.only(bottom: 3.0 * PdfPageFormat.mm),
            padding: const pw.EdgeInsets.only(bottom: 3.0 * PdfPageFormat.mm),
            decoration: const pw.BoxDecoration(
                border: pw.BoxBorder(
                    bottom: true, width: 0.5, color: PdfColors.grey)),
            child: pw.Text('Portable Document Format',
                style: pw.Theme.of(context)
                    .defaultTextStyle
                    .copyWith(color: PdfColors.grey)));
      },
      build: (pw.Context context) => <pw.Widget>[
        pw.Center(child: pw.Paragraph(text: "Your QR", style: pw.TextStyle(fontSize: 18)),),
        pw.Center(child: pw.BarcodeWidget(
          data: jsonEncode({
            "name": "_name",
            "email": "_email",
            "image": "imageUrl",

          }),
          width: 150,
          height: 150,
          barcode: pw.Barcode.qrCode(),
        ),),
        pw.Padding(padding: const pw.EdgeInsets.all(10)),
      ]));

  return doc.save();
}



Future<File> getPdf() async {
    Uint8List uint8list = await generateDocument();
    Directory output = await getTemporaryDirectory();
    File file = File(output.path + "/example.pdf");
    await file.writeAsBytes(uint8list);
    return file;
  }

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: FutureBuilder<File>(
        future: getPdf(),
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            return Center(
              child: PDFView(
                filePath: snapshot.data.path,
                autoSpacing: false,
                pageFling: false,
              ),
            );
          } else {
            return Center(child: CircularProgressIndicator());
          }
        },
      ),
    );
  }

산출:

빌드 PDF로 내가 사용이 의 PDF 패키지를. 사용 된 pdf를 표시하려면 flutter_pdfview를 사용 하고 임시 디렉토리를 가져 오려면 path_provider 패키지가 사용됩니다.

그리고 가져 오는 것을 잊지 마세요 'package:pdf/widgets.dart' as pw;