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

Cantal

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 – Marcel

Answer 1

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),
                  ),
                ],
              ),
            )
          ],
        ));
  }
}

Introrse

Answer 2

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)),
              ],
            ),
          );
        }),
      ),
    ],
  ),
);

Colson

Answer 3

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.

Ioneionesco

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. – Irreverence

Answer 4

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.

Whiggism

Answer 5

You have to make changes inside the package of Multipage.

The default value of maxPages is 20, you can increase it.

class MultiPage extends Page {

  MultiPage({
    PageTheme? pageTheme,
    PdfPageFormat? pageFormat,
    required BuildListCallback build,
    this.mainAxisAlignment = MainAxisAlignment.start,
    this.crossAxisAlignment = CrossAxisAlignment.start,
    this.header,
    this.footer,
    ThemeData? theme,
    **this.maxPages = 1000,**
    PageOrientation? orientation,
    EdgeInsetsGeometry? margin,
    TextDirection? textDirection,
  })

Suckow

Answer 6

You must fix maxPage:

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

Unworldly

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. – Quanta

This is the correct answer! I just tried it and it fixed the problem! – Rolling