How to display variable data in PDF when using syncfusion pdf creator?

Question

I'm building a Flutter web app targeting Chrome that needs to build PDFs, so I'm using SyncFusion's Flutter PDF package.

Problem is that I cannot get variable data to display inside the PDF reports I create. Can you help me?

Here's my code: (no errors or warnings)

Future<void> createHoursReportPdf(DateTime reportDate) async {

int yearWeek = getYearWeekNumber(widget.selectedDate);
String reportTitle = "Hours Report for $yearWeek";
print(reportTitle);

// Create a PDF document.
PdfDocument document = PdfDocument();

// Add a page and draw text
document.pages.add().graphics.drawString(
    reportTitle,
    PdfStandardFont(PdfFontFamily.helvetica, 20),
    brush: PdfSolidBrush(PdfColor(0, 0, 0)),
    bounds: const Rect.fromLTWH(20, 60, 150, 30));

// Save the document
List<int> bytes = await document.save();

// Dispose the document
document.dispose();

// Download the output file - Requires import 'dart:html';
AnchorElement(
    href:
    "data:application/octet-stream;charset=utf-16le;base64,${base64.encode(bytes)}")
  ..setAttribute("download", "output_$yearWeek.pdf")    // I wonder if there's a way to just display
  ..click();

}

The console output is:

Hours Report for 202405

Then it creates a PDF, but the PDF does not include the $yearWeek variable data. It only says: "Hours Report for ". See image:

Why doesn't this code include the "202405" that's in the console?

document.pages.add().graphics.drawString(
    reportTitle

Thank you for your help!

Note: This is a stateful widget page. I can get something like this to work in a stateless widget.

Answer 1

The bounds are the problem,

bounds: const Rect.fromLTWH(20, 60, 150, 300));

React.fromLTWH indicates Left, Top, Width and Height. You didn't have enough space to show all text because your height was 150.