Flickering when child contains FutureBuilder

[eriknstevenson]

Hi,

First of all, thanks for creating this widget!

I've run into a small issue when using a Slidable widget that has a child containing a FutureBuilder widget, and I hope this an appropriate place to ask. Here is the code (slightly shortened) in question:

return Slidable(
      delegate: SlidableScrollDelegate(),
      actionExtentRatio: 0.25,
      secondaryActions: <Widget>[
        IconSlideAction(
          caption: 'Delete',
          color: Colors.red,
          icon: Icons.delete,
          onTap: () => removeLocation(location),
        ),
      ],
      child: ListTile(
        onTap: () {
          Navigator.pushNamed(context, Routes.closeUp);
        },
        leading: FutureBuilder<WeatherData>(
            future: location.weatherData,
            builder: (context, snapshot) {
              if (snapshot.hasData) {
                return SizedBox(
                  width: 64.0,
                  height: 64.0,
                  child: ClipRRect(
                    borderRadius: BorderRadius.circular(64.0),
                    child: Image(
                      image: NetworkImage(snapshot.data.iconUrl),
                    ),
                  ),
                );
              }
              return CircularProgressIndicator();
            }),
      ),
    );

Now, this works fine however when the screen is redrawn (after a tap anywhere on the screen, for example), there is a slight flicker caused by (I think) the FutureBuilder going back to the ConnectionState.waiting status.

The FutureBuilder docs state the following which I think could be related:

A side-effect of this is that providing a new but already-completed future to a FutureBuilder will result in a single frame in the ConnectionState.waiting state. This is because there is no way to synchronously determine that a Future has already completed.

The futures I'm passing into the FutureBuilder are not being changed on my end (When I move the ListTile widget outside of the Slidable widget, the flicker goes away), but I was wondering if perhaps there might be something going on under the hood in Slidable that is causing this state to be affected.

If you have any ideas/suggestions as to what might be going on, or ways to avoid the flickering, it would be much appreciated.

Thanks.

[letsar]

Hi @Narrative ,

Thank you for your feedback and for this really well explained issue 😃 .

I tried to reproduce this issue, and I saw the flickering, but only when the Slidable was sliding, and not when I tapped elsewhere.

This is happening when the Slidable is sliding because the entire child is redrawn, and therefore the FutureBuilder. Which calls the future and draws the CircularProgressIndicator until the future is completed.

To avoid this I suggest you to move the FutureBuilder outside the Slidable.

If this does not resolve the flickering you observed when tapping anywhere on the screen, could you post the entire minimal code so that I can try on my side?

Thanks.

[eriknstevenson]

Thanks for the quick response and suggestion @letsar! It makes sense. I will go ahead and close this since it is not an issue with Slidable.