How to determine the amount of text that could fit on each page(child) of PageView widget, according to screen characteristics?

Question

I am working on mobile app that represents a gamebook. It contains episodes and each of them is built of one or more pages of text. For every episode I use PageView with children Columns(with nested Text and RichText) for each page. The screen orientation is locked on portraitUp and the textScaleFactor - on 1.0. The problems I found with this approach are related with the different screen characteristics of mobile devices:

1. I need to determine the amount of text for every child of the PageView. But how much text will not bottom overflow on the smaller screens? My approach till now is to test on relatively small devices with resolution close to 360 x 640 logical pixels and to leave some extra space below text. Additionally I could make every page of the PageView scrollable, thus preventing overflow at all, but this will produce bad UX by my opinion.
2. I use font size suitable for devices with the mentioned resolution. But on considerably bigger screens it will not look pretty.

So, is there good approach to determine how much text to place on each page of the PageView and to scale the font size according to mobile device size and screen characteristics? Also, I will appreciate if anyone suggest better way to compose such book-like mobile app with Flutter(using different set of widgets).

Thanks for your time.

Answer 1

@Milenb If you can add text pagination then I think it will solve your issue. You wan't need to scale down/up on the basis of screen height. If you look in to this thread then you will know how to do this.