Cara merender QRImage sebagai .png untuk digunakan dalam dokumen pdf
Saya memiliki gambar QR berikut yang ingin saya ubah menjadi .png. Ada posting serupa di stackoverflow dari beberapa tahun yang lalu, namun menggunakan tombol untuk mengklik & mendapatkan gambar yang tidak dapat saya miliki di aplikasi saya. Ini kode saya yang menggambar QR. Bantuan apa pun untuk mengonversi ke .png sehingga saya dapat menambahkan ke pdf saya dihargai.
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:
seperti inilah tampilan widget saya berdasarkan jawabannya tetapi saya tidak dapat memuat pdf saya lagi. Apakah salah karena widget saya tidak mengembalikan apapun?
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));
}
Jawaban
Untuk menggambar kode qr di pdf Anda cukup menggunakan pw.BarcodeWidget. Berikut adalah contoh kode:
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());
}
},
),
);
}
KELUARAN:

Untuk membangun pdf saya telah menggunakan paket pdf . Untuk menampilkan pdf digunakan flutter_pdfview dan untuk mendapatkan direktori temp paket path_provider digunakan.
Dan jangan lupa untuk mengimpor 'package:pdf/widgets.dart' as pw;