Why does the whole screen get repainted with every scroll?

Widgets & Design

Hi all,

I cannot wrap my head around another trivial-looking performance issue.

My web app suffers from a lot of jitter. It feels far from smooth, even though I don't have a big widget tree. So I have been investigating it.

Flutter advises against big repaints and promotes widgets like RepaintBoundary to help avoid repainting big chunks of the page. Here is a good article and video about the issue: https://api.flutter.dev/flutter/widgets/RepaintBoundary-class.html

To check if this is the issue, I enabled "Highlight repaints" option in Flutter debugger. So every time an element gets repainted, it shows a frame that changes color.

And yes, every scroll causes a whole repaint. Even on pages with no animations and no images, the whole page gets repainted with every scroll. But why?

Here is an example from my Privacy Policy page, with full of (Rich) Text widgets and one switch widget.

Any ideas?

Best,

Ercan

What have you tried so far?

Investigated, see above

Did you check FlutterFlow's Documentation for this topic?
No
2