7

In Flutter, I am getting unwanted rebuilds. In my case I use FutureBuilder to show a list by fetching db result, which is a future and have a dependency on query parameter. I tried to make it that FutureBuilder's future does not change if the query parameter does not change, But still the FutureBuilder's builder block is called every time. How can I make the FutureBuilder does not rebuild itself where its future does not change.

Below is my codes, every time the MusicList2's parent widget build, MusicList2 get rebuild, its FutureBuilder get rebuild.

class MusicList2 extends StatefulWidget {
  final MusicRowActionCallback onTapItem;
  final MusicRowActionCallback onDoubleTap;
  final MusicRowActionCallback onLongPressed;
  final String facetName;
  final String facetValue;
  const MusicList2(
      {Key key,
        this.onTapItem,
        this.onDoubleTap,
        this.onLongPressed,
        this.facetName,
        this.facetValue}) : super(key: key);
  @override
  State<StatefulWidget> createState() {

    return _MusicList2State();
  }


}

class _MusicList2State extends State<MusicList2> {
  Future<List<Music>> loadMusicByFacet;
  @override
  Widget build(BuildContext context) {

    return FutureBuilder<List<Music>>(
      future:
        loadMusicByFacet,
      builder: (context, snapshot) {
        if (snapshot.data == null)
          return Center(child: CircularProgressIndicator(),);
        return ListView.builder(
          shrinkWrap: true,
          key: const ValueKey<String>('music-list'),
          itemCount: snapshot.data.length,
          itemBuilder: (BuildContext context, int index) {
            final random = Random();
            var i = random.nextInt(5);
            return MusicRow(
              avatarBgColor: colors[i],
              music: snapshot.data[index],
              onTap: widget.onTapItem,
              onDoubleTap: widget.onDoubleTap,
              onLongPressed: widget.onLongPressed,
            );
          },
        );
      },
    );
  }

  @override
  void initState() {
    super.initState();
    loadMusicByFacet = MusicsDatabaseRepository.get.getMusicsByFacet(widget.facetName, widget.facetValue);
  }
  @override
  void didUpdateWidget(MusicList2 oldWidget) {
    super.didUpdateWidget(oldWidget);
    if (oldWidget.facetValue != widget.facetValue || oldWidget.facetName != widget.facetName) {
      loadMusicByFacet = MusicsDatabaseRepository.get.getMusicsByFacet(widget.facetName, widget.facetValue);
    }
  }
}
2
  • 1
    This might help - medium.com/saugo360/… Apr 14, 2019 at 9:41
  • no, As I have mentioned, I have made it that the future does not change. The problem here is builder block is called even the future does not change
    – David
    Apr 14, 2019 at 11:09

1 Answer 1

9

For anyone else having this error, I solved it using AbdulRahmanAlHamali's solution on GitHub. This is his answer:

Hello, I believe the problem here is that didUpdateWidget of the FutureBuilder state is being called every time a rebuild is issued. This function checks if the old future object is different from the new one, and if so, refires the FutureBuilder.

To get past this, we can call the Future somewhere other than in the build function. For example, in the initState, and save it in a member variable, and pass this variable to the FutureBuilder.

So instead of having:

FutureBuilder(
  future: someFunction(),
  ....

We should have:

initState() {
  super.initState();
  _future = SomeFunction();
}

and then

FutureBuilder(
  future: _future,
  ....

Find the original thread here.

3
  • how do you call it back if required ?
    – jagdish
    Feb 22, 2021 at 13:12
  • I know it's not a helpful answer but it really depends. I'd need to take a look at your code to give you a better answer, sorry Feb 24, 2021 at 22:46
  • How to pass parameter to the function ? Mar 13 at 11:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.