Cómo renderizar QRImage como .png para ser utilizado en un documento pdf

Aug 18 2020

Tengo la siguiente imagen QR que me gustaría convertir a .png. Hay una publicación similar en stackoverflow de hace un par de años, sin embargo, usa un botón para hacer clic y obtener la imagen que no puedo tener en mi aplicación. Aquí está mi código que dibuja el QR. Se agradece cualquier ayuda para convertir a .png para que pueda agregar a mi 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();
}

}

EDITAR:

así es como se ve mi widget según la respuesta, pero ya no puedo cargar mi pdf. ¿Está mal porque mi widget no devuelve nada?

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

Respuestas

TipuSultan Aug 18 2020 at 17:22

Para dibujar código qr en pdf, simplemente puede usar pw.BarcodeWidget. Aquí hay un código de ejemplo:

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

SALIDA:

Para construir pdf he usado el paquete pdf . Para mostrar pdf usado se usa flutter_pdfview y para obtener el directorio temporal se usa el paquete path_provider .

Y no te olvides de importar 'package:pdf/widgets.dart' as pw;