Flutter refreshing data without screen flickering and scroll issues

Question

I have a page that presents chat messages and has the dates of a group of messages as a divider in my flutter app. The data is pulled from localDB and I am trying to make it refresh the data by polling the DB for updates, however everytime I rebuild the stream or even future it makes the screen flicker and it automatically scrolls to the top of the list. The code is too big for here so I have posted it here.

It uses a Stream builder that calls a widget with data it gets from the first stream and uses another streambuilder to build the messages. I am sure this has something to do with it, but have no idea how to change that or fix the flicker and scroll weirdness.

Hoping someone has some ideas of how to handle this better or fix the flickering.

Answer 1

What you could try is creating a "app state" for each page, for example:

Loading app state - which displays a Progress Indicator when you're polling from DB/server.

Success app state - this dismisses the Progress Indicator and just shows an empty container, displaying your data.

Failed app state - Displays an error icon of your choice.

Perhaps you could try this library, Flutter GetX , and I recommend this library because of how simple it is to use.

It has state management library, which saved me lots of time and code using streams and setState({}).