Skip to content
Fix Code Error

flutter – add network images in a pdf while creating it in flutter

June 28, 2021 by Code Error
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.

  1. Add http package in dependencies section of pubspec.yaml file
dependencies:
  http: ^0.13.3
  1. Import the following package in your dart file.
//Read an image data from website/webspace
import 'package:http/http.dart' show get;
  1. 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;
  1. 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));
  1. 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

Related Articles

  • Flutter: RenderBox was not laid out
  • Error 'Map', but got one of type 'Null' flutter web with…
  • How do you load just one component when using…
  • How do you get syncfusion to work in an aurelia electron app…
  • How to install and configure Syncfusion JavaScript with…
  • Unhandled Exception: Invalid argument(s) (value): Must not…
  • How to transfer browser’s session state across pages?
  • Detect if Visual C++ Redistributable for Visual Studio 2012…
  • "Can't resolve 'syncfusion-javascript'" Webpack - Aurelia
  • Onclick, the button moves down, why can that due to?

Disclaimer: This content is shared under creative common license cc-by-sa 3.0. It is generated from StackExchange Website Network.

Post navigation

Previous Post:

How to pass variable in component.html on page load Ajax request in Angular 11

Next Post:

Change ggboxplot box outline colors

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

  • Get code errors & solutions at akashmittal.com
© 2022 Fix Code Error