Reputation: 51
I've got a problem when I load some asset images in flutter.
In fact, I use my pictures in a carousel. When I load the images, there is a (very) small loading time where the image is white. That's not really a problem but when I scroll through the carousel, the images reload when they need to be displayed. I think this comes from the item builder from dart but is there any way to remove this loading time since the images are stocked locally?
Here is a screenshot of the images
And this is the loading images
Edit : Here is my code : Carousel :
CarouselSlider.builder(
itemCount: parks.length,
itemBuilder: (BuildContext context, int itemIndex, int pageViewIndex) =>
parkCard(resort: parks[itemIndex]),
options: CarouselOptions(
height: 44.44.h,
viewportFraction: 0.7,
initialPage: initialPage,
enableInfiniteScroll: false,
reverse: false,
autoPlay: false,
autoPlayCurve: Curves.fastOutSlowIn,
enlargeCenterPage: true,
scrollDirection: Axis.horizontal,
onScrolled: (index) {},
onPageChanged: (index, x) {});
}),
)
Image card :
InkWell parkCard({required Resort resort}) {
return InkWell(
child: Card(
child: Stack(
children: [
Image.asset(
resort.imagePath,
height: 33.33.h,
fit: BoxFit.cover,
),
Column(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
decoration: const BoxDecoration(
gradient: LinearGradient(
colors: [
Color.fromARGB(200, 0, 0, 0),
Color.fromARGB(0, 0, 0, 0)
],
begin: Alignment.bottomCenter,
end: Alignment.topCenter,
),
),
width: size.width, // Full width
padding: EdgeInsets.symmetric(
vertical: 8.0.dp, horizontal: 8.0.dp),
child: Text(
resort.name,
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 20.0.dp,
),
),
),
],
)
],
fit: StackFit.expand,
),
elevation: 8.0.dp,
margin: EdgeInsets.only(bottom: 20.0.dp),
),
onTap: () async {
await Navigator.of(context)
.push(MaterialPageRoute(builder: (BuildContext ctx) {
return ResortMenu(resort: resort);
}));
},
);
}
I already tried to precache images but it didn't change much.
-- park is a list of resorts built like that:
Future<void> readJsonDatas() async {
await getVersion();
await _languageProvider.init().then((value) async {
shouldUpdate = await shouldUpdateStore.getItem('shouldUpdate');
});
String res = _languageProvider.data;
final data = await json.decode(utf8.decode(res.codeUnits));
datas = data;
resources = datas['resources']['resort_selection'];
final _dirPath = await _localPath;
final _file = File('$_dirPath/resortVersion.json');
final _data = await _file.readAsString(encoding: utf8);
print("(updated) local version : $_data");
for (var data in datas['Resorts']) {
parks.add(Resort(
id: int.parse(data['id']),
name: data['name'],
imagePath: data['image'],
bgImagePath: data['bg_image'],
slug: data['slug'],
description: data['description'],
parks: data['parks'] ?? [],
lat: data['latitude'],
long: data['longitude'],
hitBox: [
data['topLeftLatitude'],
data['topLeftLongitude'],
data['bottomRightLatitude'],
data['bottomRightLongitude']
],
closed: data['closed'] ?? []));
}
desc = parks[0].description;
currentResort = parks[0]; // Default park
await data;
Future.delayed(const Duration(milliseconds: 1000), () async {
await languageStore.setItem('language', datas);
await resortStore.setItem('resortsList', json.encode(parks));
});
}
and Resort is just a class only with variables.
Upvotes: 2
Views: 763