Como renderizar QRImage como .png para ser usado em um documento PDF
Tenho a seguinte imagem QR que gostaria de converter para .png. Há um post semelhante sobre stackoverflow de alguns anos atrás, no entanto, ele usa um botão para clicar e obter a imagem que não posso ter em meu aplicativo. Aqui está o meu código que desenha o QR. Qualquer ajuda para converter para .png para que eu possa adicionar ao meu pdf é apreciada.
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:
é assim que meu widget se parece com base na resposta, mas não consigo mais carregar meu pdf. Está errado porque meu widget não retorna 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));
}
Respostas
Para desenhar o código qr em pdf, você pode simplesmente usar pw.BarcodeWidget. Aqui está um código de exemplo:
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());
}
},
),
);
}
RESULTADO:

Para construir o pdf, usei o pacote pdf . Para mostrar o pdf usado flutter_pdfview e para obter o diretório temporário, o pacote path_provider é usado.
E não se esqueça de importar 'package:pdf/widgets.dart' as pw;