CODEWITHSUNDEEP
flutterdartflutter-layout
Nidhal Mazhoud
Nidhal Mazhoud

Reputation: 23

Image.network is blinking every time i setstate

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,

              );
            },
          ),
        )

Upvotes: 1

Views: 2416

Answers (2)

ANDYNVT
ANDYNVT

Reputation: 671

If you face the blinking issue on CacheNetworkImage. You can try a workaround by increasing the cache size.

PaintingBinding.instance.imageCache.maximumSizeBytes = 1000 << 20;

https://github.com/Baseflow/flutter_cached_network_image/issues/325#issuecomment-869041042

Upvotes: 0

Md Delwar Hossain
Md Delwar Hossain

Reputation: 185

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.

Upvotes: 0

Related Questions