How to avoid the full reload of a listview when the backend is refreshed?

Widgets & Design

I have a listview that is linked to backend query (API) which is refreshed when a new record is inserted in the database (supabase realtime).

It works nicely when a new item is added, scrolling down adding the new record, without refreshing the whole listview.

But when I add infinite scroll to the backend query, the listview refreshes entirely (full reload), which is not a desired UI experience.

I recorded two videos, the first one with the undesired experience (with infinite scroll) and the second one with the desired experience (without infinite scroll).

How could I avoid the full listview reload when using infinite scroll?

Undesired UX - with infinite scroll.mov
3.29MB
Desired UX - without infinit scroll.mov
4.67MB

What have you tried so far?

I have searched for similar problems in the community and I did not find anything similar. I also tried a 'blank page' component as the backend query loading widget, but does not work (it does not show the refresh widget, but the listview "blinks" before updating.

Did you check FlutterFlow's Documentation for this topic?
Yes
1
1 reply