Akainn Z
Akainn Z

Reputation: 51

Flutter : Loading asset image

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 imagesHere is a screenshot of the imagesAnd this is the loading imagesAnd 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

Answers (0)

Related Questions