Flutter -PDF -- Error - This widget created more than 20 pages. This may be an issue in the widget or the document

Question

I am creating a PDF document that has a large content. However, I am not able to show the PDF and I get the error

"This widget created more than 20 pages. This may be an issue in the widget or the document."

I know the text is too large but I don't know how to make it work

    pdf.addPage(
    pw.MultiPage(
      pageFormat: PdfPageFormat.a4,
      orientation: pw.PageOrientation.portrait,
      crossAxisAlignment: pw.CrossAxisAlignment.start,
      build: (pw.Context context) {
        return <pw.Widget>[
          pw.Wrap(
            children: <pw.Widget>[
              pw.Container(
                width: PdfPageFormat.a4.width,
                child: pw.Row(
                  mainAxisSize: pw.MainAxisSize.min,
                  crossAxisAlignment: pw.CrossAxisAlignment.start,
                  children: <pw.Widget>[
                    pw.Expanded(
                      child: pw.Column(
                        mainAxisSize: pw.MainAxisSize.min,
                        crossAxisAlignment: pw.CrossAxisAlignment.start,
                        children: <pw.Widget>[
                          pw.SizedBox(height: 8.0),
                          for (int i = 0; i < data['employers'].length; i++)
                            pw.Column(
                              mainAxisSize: pw.MainAxisSize.min,
                              crossAxisAlignment: pw.CrossAxisAlignment.start,
                              children: <pw.Widget>[
                                pw.Text(
                                  "${data['employers'][i]['duties']}",
                                  style: pw.TextStyle(
                                    fontSize: 12.0,
                                  ),
                                  softWrap: true,
                                ),
                              ],
                            ),
                        ],
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ];
      },
    ),
  );

I need some help on how to restructure my code so that I can display the PDF and have it wrap to the next page The text is just a a set of Lorem Ipsum .

Thanks for your help

don't use wrap or column or any other grouping widget , just return the list of widgets directly to the build method of multi page — Taha Malik, Aug 11 '22 at 05:25

score 2 · Answer 1 · answered Aug 30 '20 at 15:41

2

I think this is because of the length of the table. Try splitting the table so that it doesn't overcome 20 pages for a single table.

answered Aug 30 '20 at 15:41

nilotpal

79
2
8

i think so. let say, if i have 50 rows per table, it will create one table per page. but what if my data table row is 1000 for example. how can I fix this. i cant create multiple table. – Sras Jun 03 '22 at 08:09

score 2 · Answer 2 · answered Sep 10 '20 at 09:53

You can simply use this.

import 'package:ferns_restaurant/constants/Constants.dart';
import 'package:pdf/widgets.dart' as pw;
import 'package:pdf/widgets.dart';
import 'package:printing/printing.dart';
import 'package:woocommerce/models/order.dart';

class CustomPrinter {
  final pdf = pw.Document();

  print(WooOrder order) {
    List<LineItems> _product = order.lineItems;

    Printing.layoutPdf(
      onLayout: (format) {
        final doc = pw.Document();
        doc.addPage(
          pw.MultiPage(
              crossAxisAlignment: pw.CrossAxisAlignment.start,
              build: (pw.Context context) => <pw.Widget>[
                    _topHeaderLayout(),
                    for (int i = 0; i < _product.length; i++)
                      _productLayout(_product[i]),
                  ]),
        );
        return doc.save();
      },
      name: 'order_id_#' + order.id.toString(),
    );
  }

  _topHeaderLayout() {
    return new pw.Container(
        // height: 60.0,
        margin: pw.EdgeInsets.only(bottom: 20.0),
        child: pw.Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            pw.Expanded(
              child: pw.Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <pw.Widget>[
                  pw.Container(
                    child: pw.Text(
                      'ITEM',
                      style: pw.TextStyle(
                          fontWeight: pw.FontWeight.bold,
                          fontSize: Constants.PRINTER_BASE_FONT_SIZE),
                    ),
                  ),
                ],
              ),
            ),
            pw.Expanded(
              child: pw.Column(
                crossAxisAlignment: CrossAxisAlignment.end,
                children: <pw.Widget>[
                  pw.Text(
                    'PRICE',
                    style: pw.TextStyle(
                        fontWeight: pw.FontWeight.bold,
                        fontSize: Constants.PRINTER_BASE_FONT_SIZE),
                  ),
                ],
              ),
            )
          ],
        ));
  }

  _productLayout(LineItems item) {
    return new pw.Container(
        // height: 60.0,
        margin: pw.EdgeInsets.only(bottom: 20.0),
        child: pw.Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            pw.Expanded(
              child: pw.Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <pw.Widget>[
                  pw.Container(
                    child: pw.Text(
                      item.name.toString() + ' - ID: ' + item.id.toString(),
                      style: pw.TextStyle(
                          fontWeight: pw.FontWeight.bold,
                          fontSize: Constants.PRINTER_BASE_FONT_SIZE),
                    ),
                  ),
                  pw.Container(
                    child: Text(
                        'Qty: ' +
                            item.quantity.toString() +
                            ' x Cost: ' +
                            '£' +
                            item.price,
                        style: pw.TextStyle(
                            fontWeight: pw.FontWeight.normal,
                            fontSize: Constants.PRINTER_BASE_FONT_SIZE)),
                  ),
                ],
              ),
            ),
            pw.Expanded(
              child: pw.Column(
                crossAxisAlignment: CrossAxisAlignment.end,
                children: <pw.Widget>[
                  pw.Text(
                    '£' + item.total.toString(),
                    style: pw.TextStyle(
                        fontWeight: pw.FontWeight.normal,
                        fontSize: Constants.PRINTER_BASE_FONT_SIZE),
                  ),
                ],
              ),
            )
          ],
        ));
  }
}

score 2 · Answer 3 · answered Jan 20 '21 at 12:07

This might be a solution for your question

I paste the link's code in case you can't enter it.

Let's say we have a list issues:

pdf.addPage(
  MultiPage(
    build: (Context context) => <Widget>[
      Wrap(
        children: List<Widget>.generate(issues.length, (int index) {
          final issue = issues[index];
          return Container(
            child: Column(
              children: <Widget>[
                Header(
                    text: "Issue n°${issue.id}",
                    textStyle: TextStyle(fontSize: 20)),
                Text("Description :",
                    textAlign: TextAlign.left,
                    style: TextStyle(fontSize: 15)),
              ],
            ),
          );
        }),
      ),
    ],
  ),
);

score 2 · Answer 4 · answered Dec 25 '22 at 15:37

This is the class's constructor

package:pdf/src/widgets/multi_page.dart 
(new) MultiPage MultiPage({   
  PageTheme? pageTheme,   
  PdfPageFormat? pageFormat,   
  required List<Widget> Function(Context) build,   
  MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,   
  CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.start,   
  Widget Function(Context)? header,   
  Widget Function(Context)? footer,   
  ThemeData? theme,   
  int maxPages = 20, //******* here the default maxPages = 20  
  PageOrientation? orientation,   
  EdgeInsets? margin,   
  TextDirection? textDirection, 
})  

Containing class: MultiPage

So I think you can count your pages and assign the result to this property or simply change the number 20 to what you want.

score -1 · Answer 5 · edited Oct 13 '20 at 11:25

-1

You must fix maxPage:

doc.addPage(
      pw.MultiPage(
        maxPages: 100,
        .
        .
        )
      )

edited Oct 13 '20 at 11:25

Sabito stands with Ukraine

4,271
8
34
56

answered Oct 13 '20 at 09:41

Mohammed Belibel

63
3

1

This probably won't work. The error is thrown when the generated PDF has infinite height, changing 'maxPages' would probably only change the text of the stacktrace. Unless, obviously, the document you're generating is really longer than 20 pages. – il_boga Feb 05 '21 at 11:02
This is the correct answer! I just tried it and it fixed the problem! – TheGees Mar 08 '23 at 10:49

Flutter -PDF -- Error - This widget created more than 20 pages. This may be an issue in the widget or the document

5 Answers5

Linked