How to render QRImage as .png to be used in a pdf document

Question

I have the following QR image which I would like to convert to .png . There's a similar post on stackoverflow from a couple years ago however, it uses a button to click & get the image which I cannot have in my app. Here is my code that draws the QR. Any help to convert to .png so I can add to my pdf is appreciated.

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

}

EDIT:

this is what my widget looks like based on the answer but I'm unable to load my pdf anymore. Is it wrong because my widget does not return anything?

 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

To draw qr code on pdf you can simply use pw.BarcodeWidget. Here is an example code:

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

OUTPUT:

To build pdf I have used pdf package. To show pdf used flutter_pdfview and to get the temp directory path_provider package is used.

And don't forgot to import 'package:pdf/widgets.dart' as pw;