CODEWITHSUNDEEP
fluttercachingfirebase-storage
Altayeb Yousif
Altayeb Yousif

Reputation: 137

how to cache firebase images

    import 'package:cloud_firestore/cloud_firestore.dart';

class PocketBooksModel {
  String? docId;
  String? title;
  String? author;
  String? image;

  PocketBooksModel({this.docId, this.title, this.author, this.image});

  PocketBooksModel.fromMap(DocumentSnapshot data) {
    docId = data.id;
    title = data["title"];
    author = data["author"];
    image = data["image"];
  }
}

here is how the image is displayed in the ui code

NetworkImage(PocketBooks['image']),

I have this class witch fetch data from firestore along with images in firebase storage. I want to cache the images after they load in the app. How can i do that?

Upvotes: 0

Views: 747

Answers (1)

lead developer
lead developer

Reputation: 99

You can use the cached_network_image package which you can get from pub.dev

Once you imported the package on you widget you can use a widget like this to cache the image

CachedNetworkImage(
        imageUrl: imageUrl ,
        imageBuilder: (context, imageProvider) =>
            CircleAvatar(backgroundImage: imageProvider),
        placeholder: (context, url) => const Center(
          child: 
              CircularProgressIndicator(
                  valueColor: AlwaysStoppedAnimation(
                    primary,
                  ),
                ),
        ),
        errorWidget: (context, url, error) {
          return const Center(
            child: Icon(Icons.error, color: Colors.red),
          );
        },
      )

Upvotes: 1

Related Questions