skip to Main Content

I get the list of images from the model, then output them to FutureBuilder. The images are not cached, they are downloaded again when scrolling. I get the data in this form – {id: 106, description: 6, theme: 6, likes: 0, name: test, image: images/65aa8a1ca4315.jpg , family: test, timestamp: 2024-01-20 22:59:21, images: [images/1000004629.jpg], videos: []}

 FutureBuilder(
                future: Future.wait([fetchPost(), currentUserUpdate.getUserData()]),
                builder: (BuildContext context, AsyncSnapshot<List<dynamic>> snapshot) {
                  if (snapshot.hasData) {
                    List<Post> posts = snapshot.data![0];
                    return ListView.builder(
                      itemCount: posts.length,
                      itemBuilder: (BuildContext context, int index) {
                        Post post = posts[index];
                    
                        return ListTile(
                          
                          subtitle:  Container(
                            decoration: const BoxDecoration(
                              image: DecorationImage(
                                image: AssetImage("assets/images/tape_background_cart.png"),
                                fit: BoxFit.fill,
                              ),
                            ),
                            child: Padding(
                              padding: const EdgeInsets.only(left: 15, right: 15, top: 12, bottom: 12),
                              child: Container(
                                width: MediaQuery.of(context).size.width,
                                child: Row(
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: [
                                        
                                    if (post.images.isNotEmpty)
                                      ClipRRect(
                                        borderRadius: BorderRadius.circular(10),
                                        child: CachedNetworkImage(
                                          key: UniqueKey(),
                                          imageUrl: post.images.isNotEmpty ? '${API.hostConnectImagesPath}${post.images[0]}' : '',
                                          height: 100,
                                          width: 100,
                                          fit: BoxFit.cover,
                                          placeholder: (context, url) => Container(),
                                          errorWidget: (context, url, error) => Container(),
                                        ),
                                      ),
                                  ],
                                ),
                              ),
                            ),
                          ),
                        );
                      },
                    );
                  } else {
                    return const Center(child: CircularProgressIndicator());
                  }
                },
              ),

I tried – use a hard link and everything works – imageUrl: ‘https://mykaleidoscope.ru/x/uploads/posts/2022-10/1666206241_12-mykaleidoscope-ru-p-kartinka-na-zastavku-oboi-12.jpg’

2

Answers


  1. Try this!

     return ListView.builder(
              addAutomaticKeepAlives: true, // <<--- Add this line 
              itemCount: posts.length,
              itemBuilder: (BuildContext context, int index) {
                Post post = posts[index];
    
    Login or Signup to reply.
  2. You can use Cached Network Image package for this purpose. I hope that will solves your issue.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search