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
Try this!
You can use Cached Network Image package for this purpose. I hope that will solves your issue.