Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to make a table in PDF span multiple pages in flutter app?

I am trying to generate a pdf with tables in it, and I want to have the tables span multiple pages, else I can only display a limited number of rows in one page (otherwise I keep getting the error, Flutter - PDF error, the widget created more than 20 pages).

Is there some other widget I should use? or some library I can use? The source code file is too big to post here so I can send it via dm if you need it for reference!

Please help! Thanks!

like image 797
sivx76 Avatar asked Oct 19 '25 03:10

sivx76


1 Answers

you can use this work around

Future<Uint8List> _generateTotalDue(
    PdfPageFormat format,
    List<TotalDueStudents> totalDueList
    ) async {
  
  const pageSize = 26;
  final pdf = pw.Document(version: PdfVersion.pdf_1_5, compress: true);
  final font = await PdfGoogleFonts.cairoRegular();


  Map<int, List<pw.TableRow>> rows = {};

  final numberOfPages = (totalDueList.length / pageSize).ceil();

  for (var page = 0; page < numberOfPages; page++) {
    rows[page] = [
      pw.TableRow(
        children: [
          pw.Center(
            child: pw.Text(
              "المبلغ المتبقي",
              textDirection: pw.TextDirection.rtl,
              style: pw.TextStyle(font: font, fontSize: 11),
            ),
          ),
          pw.Center(
            child: pw.Text(
              "رقم الهاتف",
              textDirection: pw.TextDirection.rtl,
              style: pw.TextStyle(font: font, fontSize: 11),
            ),
          ),
          pw.Center(
            child: pw.Text(
              "اسم الطالب",
              textDirection: pw.TextDirection.rtl,
              style: pw.TextStyle(font: font, fontSize: 11),
            ),
          ),
          pw.Center(
            child: pw.Text(
              "no.",
              textDirection: pw.TextDirection.rtl,
              style: pw.TextStyle(font: font, fontSize: 11),
            ),
          ),
        ],
      ),
    ];

    var loopLimit =
        totalDueList.length - (totalDueList.length - ((page + 1) * pageSize));

    if (loopLimit > totalDueList.length) loopLimit = totalDueList.length;

    for (var index = pageSize * page; index < loopLimit; index++) {
      rows[page]!.add(pw.TableRow(
        children: [
          pw.Center(
            child: pw.Text(
              "${totalDueList[index].amountDue} ريال ",
              textDirection: pw.TextDirection.rtl,
              style: pw.TextStyle(font: font, fontSize: 11),
            ),
          ),
          pw.Center(
            child: pw.Text(
              totalDueList[index].mobile ?? "",
              textDirection: pw.TextDirection.rtl,
              style: pw.TextStyle(font: font, fontSize: 11),
            ),
          ),
          pw.Center(
            child: pw.Text(
              totalDueList[index].name ?? "",
              textDirection: pw.TextDirection.rtl,
              style: pw.TextStyle(font: font, fontSize: 11),
            ),
          ),
          pw.Center(
            child: pw.Text(
              "${index + 1}",
              textDirection: pw.TextDirection.ltr,
              style: pw.TextStyle(font: font, fontSize: 11),
            ),
          ),
        ],
      ));
    }
  }

  pdf.addPage(
    pw.MultiPage(
      maxPages: 100,
      pageFormat: format,
      build: (context) {
        return List<pw.Widget>.generate(rows.keys.length, (index) {
          return pw.Column(
            children: [
              pw.Table(
                border:
                pw.TableBorder.all(color: PdfColor.fromHex("#000000")),
                children: rows[index]!,
              ),
            ],
          );
        });
      },
    ),
  );
  return pdf.save();
}

Explain what i did is break the list into little lists each one on the page

like image 62
elblasy Avatar answered Oct 22 '25 03:10

elblasy



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!