Image.network is blinking every time i setstate

Question

ClipOval(child:Image.network("http://197.13.15.233:8787/api/v1/user/$id/picture", fit: BoxFit.cover, width: 40, height: 40, key: ValueKey(new Random().nextInt(100)), headers: { "authorization": "Bearer $token", // Other headers if wanted }, loadingBuilder:(BuildContext context, Widget child,ImageChunkEvent loadingProgress) {

              if (loadingProgress == null) return child;
              return ClipOval(
                child: Container(
                  width: 40,
                  height: 40,
                  child: Center(
                    child: CircularProgressIndicator(
                      value: loadingProgress.expectedTotalBytes != null ?
                      loadingProgress.cumulativeBytesLoaded / loadingProgress.expectedTotalBytes
                          : null,
                    ),
                  ),
                ),
              );
            },
            errorBuilder: (BuildContext context, Object exception, StackTrace stackTrace) {
              return SvgPicture.asset(
                "Assets/Images/avatar.svg",
                width: 40,
                height: 40,
                fit: BoxFit.cover,

              );
            },
          ),
        )

Answer 1

Every time you call setState the related StatefulWidget rebuilds. So, the networkImage is fetched again from the network.

To avoid that you can use CachedNetworkImage. It will cache your network image, no more blinking.