setState in futureBuilder

Question

I want to use setState in FutureBuilder, but keeps getting

setState() or markNeedsBuild() called during build.

I have declared ratio as global variables. I would like to update the value of ratio. The ration can be only calculated once image's width and height is successfully get.

 Widget _showItem() {
    return FutureBuilder(
        future: _bloc.selectImage(),
        builder: (context, snapshot) {
          switch (snapshot.connectionState) {
            case ConnectionState.waiting:
              return Center(
                child: CircularProgressIndicator(),
              );
              break;

            case ConnectionState.done:
              if (snapshot.hasData) {
                Image image = new Image.network(snapshot.data);
                Completer<ui.Image> completer = new Completer<ui.Image>();
                image.image.resolve(new ImageConfiguration()).addListener(
                    new ImageStreamListener((ImageInfo image, bool _) {
                  completer.complete(image.image);

                  setState(() {
                num maxHeightRatio = 300 / image.image.height;
                num maxWidthRatio = 400 / image.image.width;
                    this.ratio = maxWidthRatio.coerceAtMost(maxHeightRatio);
                  });
                }));

                return CachedNetworkImage(
                  imageUrl: snapshot.data.toString(),
                  imageBuilder: (context, imageProvider) => Container(
                    decoration: BoxDecoration(
                      image: DecorationImage(
                        image: imageProvider
                      ),
                    ),
                  ),
                  placeholder: (context, url) => CircularProgressIndicator(),
                  errorWidget: (context, url, error) => Icon(Icons.error),
                );
              } else {
                return Image.asset('assets/no_image.png');
              }
              break;

            default:
              return Text("Error");
          }
        });
  }

I understand we should not using setState in FutureBuilder, but what is the solution for this since I need to update the global variable?

You could try [this](https://stackoverflow.com/a/51273797/6891637) — Ajil O., Jun 10 '20 at 15:58

score 1 · Accepted Answer · answered Jun 10 '20 at 18:39

1

It's better to move your future call to the initState method since you don't want to call your selectImage every time your widget gets built. Once you move the call outside your build method you can do all your calculations and then setState.

void initState() {
  super.initState();
  setup();
}

setup() async {
  var data = await _bloc.selectImage();
  // do calculations using data
  // setState
}

setState in futureBuilder

1 Answers1

Linked