Map Firebase Model to Pdf Grid

[Tim]

Hello,

I am trying to take data from firebase and map each element of my model to columns

Here is my model:

class Report {

String uid;

String name;

String insenseName;

String description;

Report(

{this.uid,

this.name,

this.insenseName,

this.description,

});

factory Report.fromMap(Map data) {

return Report(

uid: data['uid'],

name: data['name'],

insenseName: data['insense_name'],

description: data['description'] ?? '',

);

}

}

I supply my data using the provider package which creates an instance of the model class with the firebase data.

Here is my screen where you click a button to display pdf

import 'package:flutter/material.dart';

import 'package:flutter_ledger/services/mobile.dart';

import 'package:flutter_ledger/services/models.dart';

import 'package:provider/provider.dart';

import 'package:syncfusion_flutter_pdf/pdf.dart';

class pdfCreate extends StatelessWidget {

@override

Widget build(BuildContext context) {

return Scaffold(

body: Center(

child: ElevatedButton(

child: Text('create pdf'),

onPressed: () => _createPDF(context),

),

),

);

}

Future<void> _createPDF(BuildContext context) async {

//Provider of List

final usersList = Provider.of<List<Report>>(context);

PdfDocument document = PdfDocument();

final page = document.pages.add();

PdfGrid grid = PdfGrid();

grid.style = PdfGridStyle(

font: PdfStandardFont(PdfFontFamily.helvetica, 10),

cellPadding: PdfPaddings(bottom: 2, right: 5, top: 2, left: 5),

);

grid.columns.add(count: 3);

grid.headers.add(1);

PdfGridRow header = grid.headers[0];

header.cells[0].value = 'Transactions';

header.cells[1].value = 'Amount';

header.cells[2].value = 'Date';

PdfGridRow row = grid.rows.add();

row.cells[0].value = 'CASH';

row.cells[1].value = '2000';

row.cells[2].value = 'June 3rd, 2020 at 10:37pm';

row.cells[0].value = row = grid.rows.add();

row.cells[0].value = 'CASH';

row.cells[1].value = '2000';

row.cells[2].value = 'June 3rd, 2020 at 10:37pm';

page.graphics.drawString(

'Reports Statement', PdfStandardFont(PdfFontFamily.helvetica, 30));

grid.draw(page: page, bounds: const Rect.fromLTWH(0, 150, 0, 0));

List<int> bytes = document.save();

document.dispose();

saveAndLaunchFle(bytes, 'Output.pdf');

}

}

My question is this... How do I take the 'usersList' which is a list of my Report model ( List<Report> ) as shown and display each element like 'uid', 'name' and 'description' and map them into columns?

Help is appreciated!

[Chinnu Muniyappan]

Hi Tim, 

 

Thank you for contacting Syncfusion support. 

 

We have created a simple sample to create PDF grid using list of custom objects for your reference. Kindly refer the below sample in your end and let us know whether it is achieves your requirement. 

 

Sample link: https://www.syncfusion.com/downloads/support/forum/167448/ze/pdf_grid_sample-42565814  

 

Regards,   

Chinnu M 

[Tim]

Hello Chinnu,

This is exactly what I needed! I very much appreciate the time you took to answer my question and very clearly as well! The syncfusion team has been great and I am going to continue my subscription. 

Thanks,

Tim

[Steven Tillson]

I tried the code but the system is giving an error. What to do?

[Anand Panchamoorthi]

Hi Steven, 

The provided sample https://www.syncfusion.com/downloads/support/forum/167448/ze/pdf_grid_sample-42565814 is working in our end without any errors. We request you to provide the below details to validate further and it will help us to update the prompt solution. 

• Complete stack trace
• Code example to reproduce
• Flutter doctor result

With Regards, 

Anand Panchamoorthi

[Mohammed Yusuf]

Hi Anand,

Could you please explain same with image URL, I want to show image also in each row along with user details

Support will be highly appreciated!!

Regards

Mohammed Yusuf

[Gowthamraj Kumar]

Hi Mohammed Yusuf, 

We have created a sample to read the image data from webspace/website by using image URL and drawn the image using the retrieved image data. Kindly try the following code example and sample in your side. 

 

1. Add http package in dependencies section of pubspec.yaml file

dependencies: 

  http: ^0.12.2 

 

2. Import the following package in your dart file.

import 'package:http/http.dart' show get; 

 

3. 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(url);
var data = response.bodyBytes; 

 

4. Draw image in PDF

//Create a new PDF document
PdfDocument document = PdfDocument();
//Load an image from image data
PdfBitmap image = PdfBitmap(data);
//Draw image in page graphics
document.pages.add().graphics.drawImage(image, const Rect.fromLTWH(0, 0, 500, 200));
//Save and launch the document
final List<int> bytes = document.save();
//Dispose the document.
document.dispose(); 

 

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/pdf_sample-646187320  

Please let us know if you need any further assistance in this. 

Regards, 

Gowthamraj K