How to create images in A4 or PDF in Flutter from widgets?

Question

My app needs to create an image or a pdf in A4 format from Widgets, actually a Column that will have a dynamic height (depending on the content the user adds on that SingleChildScrollView -> Column, the user can add images and texts to that Column).

How do I create images in A4 format or PDF in Flutter from Widgets of a Column that will have a dynamic height? (I can have a Column with a list of widgets that will fit the screen and others that doesn't, like 20 big widgets that will go out of the screen.)

Solution

Method 1: Generate for one page, then (automatically) scroll to next page, then generate for the second page, etc.

Method 2: For each page, wrap by one RepaintBoundary and one Key. Say you have 10 pages, then you have 10 keys, and use those keys to generate all pages.

If only visible thing is generated, try the following:

List<Widget> yourPages = ...;
List<Key> yourKeys = yourPages.map((_) => GlobalKey()).toList(); // or other kinds of keys? what do you use
Stack(children:[
for(var i=0;i< yourPages.length;i++) 
RepaintBoundary(key: yourKeys[i], child: yourPages[i]),
])

In this way, everything may be generate-able.

Comments

[djalmafreestyler]

The first method I tried but when the page is bigger than the screen I had issues to generate the page with the correct height, is it possible to have an example with code?

[djalmafreestyler]

The second method is not possible because the pages are generated dynamically, I don't have a specific number of pages.

[ch271828n]

@djalmafreestyler for method 2, see edited code. for method one, can you make your widget smaller? for example, by Transform widget

[djalmafreestyler]

I have a single Column that will have a dynamic height depending on the content the user adds, for example, the user can add images inside the column, it's a one Column that can have 3 pages or 20 pages or more.

[ch271828n]

@djalmafreestyler then try method 1. For example, say your page is of height 500, then you generate for a page, scroll down 500px, then generate again, etc

[djalmafreestyler]

Actually I tried that but I had problems using scrolling down, sometimes I get the page with duplicated content, needing to crop and I didn't know how to fix.

[ch271828n]

@djalmafreestyler show more code and screenshot

[djalmafreestyler]

I just updated the question, I think it's more simple now, could you please check that again?

[ch271828n]

@djalmafreestyler what is the problem? just wrap column into listview, and scroll over and over again to screenshot each slice.

[ch271828n]

@djalmafreestyler if you find it useful, you can accept this answer :)