วิธีการเรนเดอร์ QRImage เป็น. png เพื่อใช้ในเอกสาร pdf

Aug 18 2020

ฉันมีภาพ QR ต่อไปนี้ที่ต้องการแปลงเป็น. png มีโพสต์ที่คล้ายกันใน stackoverflow เมื่อสองสามปีก่อน แต่มันใช้ปุ่มเพื่อคลิกและรับภาพที่ฉันไม่มีในแอพของฉัน นี่คือรหัสของฉันที่ดึง QR ความช่วยเหลือใด ๆ ในการแปลงเป็น. png เพื่อให้ฉันสามารถเพิ่มลงใน pdf ของฉันได้รับการชื่นชม

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));
  }

คำตอบ

TipuSultan Aug 18 2020 at 17:22

ในการวาดรหัส qr บน pdf คุณสามารถใช้ 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และเพื่อรับแพ็คเกจtemp directory path_providerจะถูกใช้

และอย่าลืมนำเข้า 'package:pdf/widgets.dart' as pw;