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

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,
      ),
    );
  }

Link to 3Speak App's Source code.

• Here is where you can find the re-usable widget
• https://github.com/spknetwork/Android-App/blob/newDevelop/lib/src/widgets/cached_image.dart

Sample Screenshot

• Let me provide a screenshot explaining this.
• On left, you can see the images are in loading state
• On right, you can see the images when those are done downloading.
• Once downloaded, it will be cached & re-used.
• With this, 3Speak app will save a lot of network bandwidth of user's data.

Another Screenshot

• In this screenshot, you can see that, I've added an indicator.
• You can see that for some of the podcasts, thumbnails have failed to load.

• For those failure thumbnails, I'm displaying CTT-podcast icon as a default icon at the moment.
• We can come up with a different icon & implement it.

Any other suggestions for 3Speak App?

• Do you have any suggestion / Feedback / comment, please do share.
• I will take a note of it & work on it whenever I get chance.

Support me

• Do you like the work I do?
• Do you want me to keep going?
• Please Reblog
• Please help me connect with more communities
• Please vote me as Hive Witness

Please 🙏	Support Me
Vote me as Hive Witness	Donate Hive Or HBD