CODEWITHSUNDEEP
flutterlistviewblocstate-managementflutter-futurebuilder
Stefan Rheeders
Stefan Rheeders

Reputation: 1

Flutter State Management Issue - Contant Reloading of UI

I would like some advice in general in regard to coding with Flutter.

I'm currently working on a mobile application and I keep running into the same issue. The future builders and stream builders are great in that you have the option to display a loading widget while data is being fetch and then the data is displayed when it is ready. That's all great. But as a user you only really want to see a loading indicator once when you switch to a page and not consecutively every time there is the slightest update to the data.

This creates a very unpleasant user experience where widgets on the user interface constantly keep disappearing and reappearing.

Especially in a list where the entire list rebuilds each time a single item is updated.

I've had to dedicate the largest amount of my coding time on finding creative ways to store the data that was previously loaded and try to get the future builder to display that until the data update is finished loading. And until now I thought the solution would be to use bloc state management as it would update the user interface in a different way but now in the below example I ended up with the same issue despite using bloc.

Is this an issue that is unique to Flutter? In my previous experience with other languages I haven't come across something like this before. How are you resolving this issue? Is there something I'm missing in regard to state management or the use of bloc?

return BlocBuilder<ChatBloc, ChatBlocState>(builder: (context, state) {
      List<Message> messages = state.messages;
      return ScrollablePositionedList.builder(
        itemScrollController: itemScrollController,
        scrollOffsetController: scrollOffsetController,
        itemPositionsListener: itemPositionsListener,
        scrollOffsetListener: scrollOffsetListener,
        reverse: true,
        shrinkWrap: true,
        itemCount: messages.length,
        itemBuilder: (context, index) {
           return MessageItem(
            message: messages[index]);
        },
      );
});

I am expecting the previous state to be displayed until the new state is loaded. There shouldn't be a gap where a loading indicator or empty container is displayed.

Upvotes: 2

Views: 103

Answers (1)

Chihiro
Chihiro

Reputation: 417

I think buildWhen should be able to solve your problem

BlocBuilder<ChatBloc, ChatBlocState>(
buildWhen: (previousState, state) {
// return true/false to determine whether or not
// to rebuild the widget with state
},

You can view more information here

Upvotes: 1

Related Questions