Flutter bloc library and performant architecture

41 views Asked by At

I am currently experimenting with the bloc_library as state managing library but I am wondering how I can integrate it in a performant way. The BlocBuilds do have a "buildWhen" property but that's pretty much useless when the entire BlocBuilder is being rebuilt because the parent BlocBuilder decided to rerender or am I seeing it wrong? Consider the sample below:

class LogbookPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) => Scaffold(
      body: BlocBuilder<LogbookBloc, LogbookState>(builder: (context, state) {
        // this changes very frequently
        // (multiple times a second)
        if (state is Loading) {
          return null;
        } else {
          return Column(children: [
            BlocBuilder<LogbookBloc, LogbookState>(
                buildWhen: (old, cur) => !((old is Loaded) && (cur is Loaded) && old.recordIndex == cur.recordIndex),
                builder: (context, state) {
                  // this changes very frequently
                  // (multiple times a second)
                  return null;
                }),
            BlocBuilder<LogbookBloc, LogbookState>(
                buildWhen: (old, cur) => !((cur is Loaded) && (old is Loaded) && cur.logbook == old.logbook),
                builder: (context, state) {
                  // this changes actually NEVER!!
                  // and the buildWhen function will always return false except for the first time.
                  // the entire list consisting of thousends of elements is however being
                  // re-rendered whenever the recordIndex changes (multiple times a second)
                  // slowing down the framerate indefinitely
                  // because I guess the entire BlocBuilder is being rebuilt from scratch independently
                  // from what then stands in buildWhen

                  // HOW DO APPLY THE BLOC ARCHITECTURE WITHOUT THIS HAPPENING
                  return null;
                })
          ]);
        }
      }));
}

I imagine that a possible solution might be to separate the data loading aspect from the navigation aspect in two separate blocs but I don't like the idea of dispersing the state according to the needs of the UI (as this creates an indirect dependency in my opinion as restructuring the UI would then require restructuring the bloc structure as a consequence which contradicts ui = f(state)).

Any thoughts?

0

There are 0 answers