Code Snippet for Cached Network Image for 3Speak Mobile App in Flutter - Dart

sagarkothari88(77)

Published in

HiveDevs

Words

353

Reading

2 min

Listen

Play

New Versions of 3Speak App

First of all, Have you downloaded the latest version of 3Speak App from the Stores?
If not, please update your app today.
https://play.google.com/store/apps/details/3Speak_App?id=tv.threespeak.app
https://apps.apple.com/us/app/3speak/id1614771373
I hope, 3Speak will soon officially announce about the new versions.

Why do we need cached Network Image?

Each time you scroll a feed, thumbnail of the video is loaded via network
Similarly, user's thumbnail is also loaded via network.
Same thing goes for podcast & episodes.
If user is on mobile data, too much of their mobile data is consumed.
Best way is to cache those thumbnails & re-use it.

Which library did I use?

I used following library for caching the images
https://pub.dev/packages/cached_network_image
It helps me to cache images, show loading indicator when images are being loaded
It also helps me to set the default-image in case if thumbnail urls are invalid.

Sample code snippet please

CachedNetworkImage(
    imageUrl: "http://via.placeholder.com/350x150",
    progressIndicatorBuilder: (context, url, downloadProgress) => 
               CircularProgressIndicator(value: downloadProgress.progress),
       errorWidget: (context, url, error) => Icon(Icons.error),
    ),

Actual code snippet please

  Widget build(BuildContext context) {
    return CachedNetworkImage(
      imageUrl: imageUrl ?? '',
      height: imageHeight,
      width: imageWidth,
      fit: imageHeight != null ? BoxFit.cover : null,
      progressIndicatorBuilder: (context, url, downloadProgress) =>
          imageHeight != null
              ? Center(
                  child: SizedBox(
                    height: loadingIndicatorSize ?? 50,
                    width: loadingIndicatorSize ?? 50,
                    child: CircularProgressIndicator(
                      value: downloadProgress.progress,
                      strokeWidth: 1.5,
                    ),
                  ),
                )
              : CircularProgressIndicator(
                  value: downloadProgress.progress,
                  strokeWidth: 1.5,
                ),
      errorWidget: (context, url, error) => Image.asset(
        'assets/ctt-logo.png',
        height: imageHeight,
        width: imageWidth,
      ),
    );
  }