flutter – add network images in a pdf while creating it in flutter
Posted By: Anonymous
hello guys i m trying to add network images or url of images while my pdf is being created.
basically i m tying to achieve when a user clicks on download button in my cart all the products in my cart should be added along with the images of it , so far images are not getting added but the other details are added in the pdf.
i m using syncfusion pdf to create a pdf n my pdf is creating successfully.
i want to add images also with it.
my logic was to download the images n then add it to the pdf but it is getting crashed somehow.
i used below packages
https://pub.dev/packages/syncfusion_flutter_pdf
https://pub.dev/packages/image_downloader
below is the code i have tried
List<File> _mulitpleFiles = [];
Future<void> generateInvoice() async {
//Create a PDF document.
final PdfDocument document = PdfDocument();
//Add page to the PDF
final PdfPage page = document.pages.add();
//Get page client size
final Size pageSize = page.getClientSize();
//Draw rectangle
page.graphics.drawRectangle(
bounds: Rect.fromLTWH(0, 0, pageSize.width, pageSize.height),
pen: PdfPen(PdfColor(142, 170, 219, 255)));
//Generate PDF grid.
final PdfGrid grid = getGrid();
//Draw the header section by creating text element
final PdfLayoutResult result = drawHeader(page, pageSize, grid);
//Draw grid
drawGrid(page, grid, result);
//Add invoice footer
drawFooter(page, pageSize);
//Save the PDF document
final List<int> bytes = document.save();
//Dispose the document.
document.dispose();
//Get external storage directory
Directory directory = (await getExternalStorageDirectory());
//Get directory path
String path = directory.path;
print(path);
//Create an empty file to write PDF data
File file = File('$path/Output.pdf');
//Write PDF data
await file.writeAsBytes(bytes, flush: true);
//Open the PDF document in mobile
OpenFile.open('$path/Output.pdf');
}
//Draws the invoice header
PdfLayoutResult drawHeader(PdfPage page, Size pageSize, PdfGrid grid) {
//Draw rectangle
page.graphics.drawRectangle(
brush: PdfSolidBrush(PdfColor(91, 126, 215, 255)),
bounds: Rect.fromLTWH(0, 0, pageSize.width - 115, 90));
//Draw string
page.graphics.drawString(
'INVOICE', PdfStandardFont(PdfFontFamily.helvetica, 30),
brush: PdfBrushes.white,
bounds: Rect.fromLTWH(25, 0, pageSize.width - 115, 90),
format: PdfStringFormat(lineAlignment: PdfVerticalAlignment.middle));
page.graphics.drawRectangle(
bounds: Rect.fromLTWH(400, 0, pageSize.width - 400, 90),
brush: PdfSolidBrush(PdfColor(65, 104, 205)));
page.graphics.drawString('',
PdfStandardFont(PdfFontFamily.helvetica, 18),
bounds: Rect.fromLTWH(400, 0, pageSize.width - 400, 100),
brush: PdfBrushes.white,
format: PdfStringFormat(
alignment: PdfTextAlignment.center,
lineAlignment: PdfVerticalAlignment.middle));
final PdfFont contentFont = PdfStandardFont(PdfFontFamily.helvetica, 9);
//Draw string
page.graphics.drawString('', contentFont,
brush: PdfBrushes.white,
bounds: Rect.fromLTWH(400, 0, pageSize.width - 400, 33),
format: PdfStringFormat(
alignment: PdfTextAlignment.center,
lineAlignment: PdfVerticalAlignment.bottom));
//Create data foramt and convert it to text.
final DateFormat format = DateFormat.yMMMMd('en_US');
final String invoiceNumber = '';// + format.format(DateTime.now());
final Size contentSize = contentFont.measureString(invoiceNumber);
// ignore: leading_newlines_in_multiline_strings
const String address = '''''';
// final DateFormat format = DateFormat.yMMMMd('en_US');
// final String invoiceNumber = 'Invoice Number: 2058557939rnrnDate: ' +
// format.format(DateTime.now());
// final Size contentSize = contentFont.measureString(invoiceNumber);
// // ignore: leading_newlines_in_multiline_strings
// const String address = '''Bill To: rnrnAbraham Swearegin,
// rnrnUnited States, California, San Mateo,
// rnrn9920 BridgePointe Parkway, rnrn9365550136''';
PdfTextElement(text: invoiceNumber, font: contentFont).draw(
page: page,
bounds: Rect.fromLTWH(pageSize.width - (contentSize.width + 30), 120,
contentSize.width + 30, pageSize.height - 120));
return PdfTextElement(text: address, font: contentFont).draw(
page: page,
bounds: Rect.fromLTWH(30, 120,
pageSize.width - (contentSize.width + 30), pageSize.height - 120));
}
//Draws the grid
void drawGrid(PdfPage page, PdfGrid grid, PdfLayoutResult result) {
Rect totalPriceCellBounds;
Rect quantityCellBounds;
//Invoke the beginCellLayout event.
grid.beginCellLayout = (Object sender, PdfGridBeginCellLayoutArgs args) {
final PdfGrid grid = sender as PdfGrid;
if (args.cellIndex == grid.columns.count - 1) {
totalPriceCellBounds = args.bounds;
} else if (args.cellIndex == grid.columns.count - 2) {
quantityCellBounds = args.bounds;
}
};
//Draw the PDF grid and get the result.
result = grid.draw(
page: page, bounds: Rect.fromLTWH(0, result.bounds.bottom + 40, 0, 0));
//Draw grand total.
page.graphics.drawString('',
PdfStandardFont(PdfFontFamily.helvetica, 9, style: PdfFontStyle.bold),
bounds: Rect.fromLTWH(
quantityCellBounds.left,
result.bounds.bottom + 10,
quantityCellBounds.width,
quantityCellBounds.height));
page.graphics.drawString('',
PdfStandardFont(PdfFontFamily.helvetica, 9, style: PdfFontStyle.bold),
bounds: Rect.fromLTWH(
totalPriceCellBounds.left,
result.bounds.bottom + 10,
totalPriceCellBounds.width,
totalPriceCellBounds.height));
}
//Draw the invoice footer data.
void drawFooter(PdfPage page, Size pageSize) {
final PdfPen linePen =
PdfPen(PdfColor(142, 170, 219, 255), dashStyle: PdfDashStyle.custom);
linePen.dashPattern = <double>[3, 3];
//Draw line
page.graphics.drawLine(linePen, Offset(0, pageSize.height - 100),
Offset(pageSize.width, pageSize.height - 100));
const String footerContent =
// ignore: leading_newlines_in_multiline_strings
'''rnrnAny Questions? [email protected]''';
//Added 30 as a margin for the layout
page.graphics.drawString(
footerContent, PdfStandardFont(PdfFontFamily.helvetica, 9),
format: PdfStringFormat(alignment: PdfTextAlignment.right),
bounds: Rect.fromLTWH(pageSize.width - 30, pageSize.height - 70, 0, 0));
}
//Create PDF grid and return
PdfGrid getGrid() {
//Create a PDF grid
final PdfGrid grid = PdfGrid();
//Secify the columns count to the grid.
grid.columns.add(count: 5);
//Create the header row of the grid.
final PdfGridRow headerRow = grid.headers.add(1)[0];
//Set style
headerRow.style.backgroundBrush = PdfSolidBrush(PdfColor(68, 114, 196));
headerRow.style.textBrush = PdfBrushes.white;
headerRow.cells[0].value = 'Product Image';
headerRow.cells[1].value = 'Product Id';
headerRow.cells[1].stringFormat.alignment = PdfTextAlignment.center;
headerRow.cells[2].value = 'Product Name';
headerRow.cells[3].value = 'Metal';
headerRow.cells[4].value = 'Stone';
headerRow.cells[5].value = 'Quantity';
//Add rows
for(int i = 0; i < _totalItems; i++){
addProducts(array[i], nameArray[i], metalArray[i], _mulitpleFiles[i], stoneArray[i], 1, grid);
}
//Apply the table built-in style
grid.applyBuiltInStyle(PdfGridBuiltInStyle.listTable4Accent5);
//Set gird columns width
grid.columns[1].width = 200;
for (int i = 0; i < headerRow.cells.count; i++) {
headerRow.cells[i].style.cellPadding =
PdfPaddings(bottom: 5, left: 5, right: 5, top: 5);
}
for (int i = 0; i < grid.rows.count; i++) {
final PdfGridRow row = grid.rows[i];
for (int j = 0; j < row.cells.count; j++) {
final PdfGridCell cell = row.cells[j];
if (j == 0) {
cell.stringFormat.alignment = PdfTextAlignment.center;
}
cell.style.cellPadding =
PdfPaddings(bottom: 5, left: 5, right: 5, top: 5);
}
}
return grid;
}
//Create and row for the grid.
void addProducts(String productId, String productName, String metal,File productImage,
String stone, int quantity, PdfGrid grid) {
final PdfGridRow row = grid.rows.add();
row.cells[0].value = productImage;
row.cells[1].value = productId;
row.cells[2].value = productName;
row.cells[3].value = metal;
row.cells[4].value = stone;
row.cells[5].value = quantity.toString();
}
//Get the total amount.
double getTotalAmount(PdfGrid grid) {
double total = 0;
for (int i = 0; i < grid.rows.count; i++) {
final String value =
grid.rows[i].cells[grid.columns.count - 1].value as String;
total += double.parse(value);
}
return total;
}
below is the on tap button function when a user click on the download button
onTap: () async {
// var list = photoArray;
var list = [
"https://raw.githubusercontent.com/wiki/ko2ic/image_downloader/images/bigsize.jpg",
"https://raw.githubusercontent.com/wiki/ko2ic/image_downloader/images/flutter.jpg",
"https://raw.githubusercontent.com/wiki/ko2ic/image_downloader/images/sample.HEIC",
"https://raw.githubusercontent.com/wiki/ko2ic/image_downloader/images/flutter_transparent.png",
"https://raw.githubusercontent.com/wiki/ko2ic/flutter_google_ad_manager/images/sample.gif",
"https://raw.githubusercontent.com/wiki/ko2ic/image_downloader/images/flutter_no.png",
"https://raw.githubusercontent.com/wiki/ko2ic/image_downloader/images/flutter.png",
"https://raw.githubusercontent.com/wiki/ko2ic/image_downloader/images/flutter_real_png.jpg",
"https://raw.githubusercontent.com/wiki/ko2ic/image_downloader/images/bigsize.jpg",
"https://raw.githubusercontent.com/wiki/ko2ic/image_downloader/images/flutter.jpg",
"https://raw.githubusercontent.com/wiki/ko2ic/image_downloader/images/flutter_transparent.png",
"https://raw.githubusercontent.com/wiki/ko2ic/image_downloader/images/flutter_no.png",
"https://raw.githubusercontent.com/wiki/ko2ic/flutter_google_ad_manager/images/sample.gif",
"https://raw.githubusercontent.com/wiki/ko2ic/image_downloader/images/flutter.png",
"https://raw.githubusercontent.com/wiki/ko2ic/image_downloader/images/flutter_real_png.jpg",
];
List<File> files = [];
for (var url in list) {
try {
final imageId =
await ImageDownloader.downloadImage(url);
final path = await ImageDownloader.findPath(imageId);
print(path);
files.add(File(path));
} catch (error) {
print(error);
}
}
setState(() {
_mulitpleFiles.addAll(files);
});
print('invoice');
//Navigator.push(context, MaterialPageRoute(builder: (context) => FullScreen(total: _totalItems,nameArray: nameArray,skuArray: skuArray,stoneArray: stoneArray,metalArray: metalArray,array: array,)));
generateInvoice();
},
Solution
Thanks for contacting Syncfusion support.
We have checked the code example provided and identified that “await ImageDownloader.downloadImage(url)†returns null. Due to this, there is no image preserved in PDF grid cell. We have created a sample to read the image data from webspace/website and drawn the image using the retrieved image data. Kindly try the following code example and sample in your side and let us know whether the issue is resolved at your end.
- Add http package in dependencies section of pubspec.yaml file
dependencies:
http: ^0.13.3
- Import the following package in your dart file.
//Read an image data from website/webspace
import 'package:http/http.dart' show get;
- Get image data
//Read an image data from website/webspace
var url = "https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_1280.jpg";
var response = await get(Uri.parse(url));
var data = response.bodyBytes;
- Draw image into PDF document
//Load image data into PDF bitmap object
PdfBitmap image = PdfBitmap(data);
//Draw image in page graphics
document.pages
.add()
.graphics
.drawImage(image, const Rect.fromLTWH(0, 0, 500, 200));
- Draw image into PDF document
//Create a new page to draw PDF grid
final PdfPage girdPage = document.pages.add();
//Draw image in PDF grid cell
//Create a PDF grid
final PdfGrid grid = PdfGrid();
//Specify the columns count to the grid.
grid.columns.add(count: 2);
//Create the header row of the grid.
final PdfGridRow headerRow = grid.headers.add(1)[0];
headerRow.cells[0].value = 'Image 1';
headerRow.cells[1].value = 'Image 2';
//Add a new row
final PdfGridRow row = grid.rows.add();
//Get image bytes and set into PDF grid cell as PDF bitmap object
var imageResponse1 = await get(Uri.parse(
"https://raw.githubusercontent.com/wiki/ko2ic/image_downloader/images/flutter.jpg"));
row.cells[0].value = PdfBitmap(imageResponse1.bodyBytes.toList());
//Get image bytes and set into PDF grid cell as PDF bitmap object
var imageResponse2 = await get(Uri.parse(
"https://raw.githubusercontent.com/wiki/ko2ic/image_downloader/images/flutter_transparent.png"));
row.cells[1].value = PdfBitmap(imageResponse2.bodyBytes.toList());
//Apply the table built-in style
grid.applyBuiltInStyle(PdfGridBuiltInStyle.listTable4Accent5);
//Draw grid in a new page created
grid.draw(
page: girdPage,
bounds: Rect.fromLTWH(0, 0, girdPage.getClientSize().width,
girdPage.getClientSize().height));
Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/pdf_sample-948491757
And also we have support to draw JPEG and PNG images in PDF document. Please ensure that the image data is the type of JPEG or PNG before loading into PdfBitmap object. Please find more details from https://help.syncfusion.com/flutter/pdf/working-with-images
And also identified index related changes in the sample code provided. Please update the columns count as 6 for adding 6 columns in PDF grid. Please check the below code for more details,
//Secify the columns count to the grid.
grid.columns.add(count: 6);
Please let us know if you need any further assistance in this.
With Regards,
Anand Panchamoorthi
Answered By: Anonymous
Disclaimer: This content is shared under creative common license cc-by-sa 3.0. It is generated from StackExchange Website Network.
