'How to preload network images from fireabse storage in flutter with dart?
I have a problem to display user images immediately...
I have the image URLs of the users stored in cloud firestore. I have a model where I get the URLs and store them in a list. The users are also in a list.
All images are saved in firebase storage.
So now to my problem: I want that all images of the user, each user have at least 3 images, are show immediately when the app has loaded all data. So when I open the app a loading animation is showing and than the layout is showing.
How can I achieve this?
I also tried already this method but it doesn't work. It shows me this error message:
The following StateError was thrown image failed to precache: Bad state: Failed to load "url"
This is the class CacheUserImages
import 'package:flutter/material.dart';
import 'package:flutter_advanced_networkimage_2/provider.dart';
class CacheUserImages {
static Future cacheUserImages(
BuildContext _cacheUserImagesContext, String cacheUserImagesUrl) =>
precacheImage(
AdvancedNetworkImage(
cacheUserImagesUrl,
useDiskCache: true,
cacheRule: CacheRule(
maxAge: const Duration(days: 7),
),
),
_cacheUserImagesContext);
}
This is inside main and I call _getUser inside initState
Future _getUser(
BuildContext _getUserContext, List<UserModel> _getUserUser) async {
_getUserUser
.map((_user) => _getUserImages(_getUserContext, _user))
.toList();
}
Future _getUserImages(
BuildContext _getUserImagesContext, UserModel _getUserImagesUser) async {
await Future.wait(_getUserImagesUser.userImages
.map((_userImages) =>
CacheUserImages.cacheUserImages(_getUserImagesContext, _userImages))
.toList());
setState(() {
_loadingAppData = false;
});
}
It would be very helpfull if someone could show me a full example of how to precache images before the UI builds and than show the precached images immediately without an extra loading animation like in CachedNetworkImage.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
