QRmage को रेंडर कैसे करें। Pdf में डॉक्यूमेंट में इस्तेमाल किया जा सकता है
मेरे पास निम्न QR छवि है जिसे मैं .png में परिवर्तित करना चाहूंगा। कुछ साल पहले स्टैकओवरफ्लो पर एक समान पोस्ट है, हालांकि, यह उस छवि को क्लिक करने और प्राप्त करने के लिए एक बटन का उपयोग करता है जो मेरे ऐप में नहीं हो सकता है। यहाँ मेरा कोड है जो QR खींचता है। कन्वर्ट करने के लिए कोई मदद। Png तो मैं अपने पीडीएफ में जोड़ सकते हैं की सराहना की है।
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();
}
}
संपादित करें:
यह वही है जो मेरे विजेट उत्तर के आधार पर दिखता है, लेकिन मैं अपने पीडीएफ को लोड करने में असमर्थ हूं। क्या यह गलत है क्योंकि मेरा विजेट कुछ भी वापस नहीं करता है?
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));
}
जवाब
पीडीएफ पर qr कोड खींचने के लिए आप बस 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 का उपयोग किया गया flutter_pdfview और अस्थायी निर्देशिका पाने के लिए path_provider पैकेज का उपयोग किया जाता है।
और आयात करना न भूले 'package:pdf/widgets.dart' as pw;