Показывать виджет загрузки во время загрузки изображения с высоким разрешением

Question

У меня есть фотогалерея, с фотографиями высокого разрешения. Я использую сетку, чтобы перечислить все фотографии. И это не относится к сетевым изображениям.

Я хочу, чтобы фото не отображалось, я хочу показать spin_widget во время загрузки изображений вместо пустых полей.

Основной класс:

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: MyAppbar(
      centerLogo: true,
    ),
    body: GridView.count(
      crossAxisCount: 2,
      mainAxisSpacing: 8,
      crossAxisSpacing: 8,
      padding: EdgeInsets.all(8),
      childAspectRatio: 1,
      children: mapIndexed(
        galleryItems,
        (index, item) => PhotoItem(
          photoItem: item,
          onTap: () {
            open(context, index);
          },
        ),
      ).toList(),
    ),
  );
}

Каждый элемент фото. Имя класса: PhotoItem

@override
Widget build(BuildContext context) {
  return Material(
    shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(4)),
    clipBehavior: Clip.antiAlias,
    child: Hero(
      child: GestureDetector(
        onTap: onTap,
        child: Image.asset(
          photoItem.assetName,
          fit: BoxFit.cover,
        ),
      ),
      tag: photoItem.assetName,
    ),
  );
}

Я могу использовать высоту кеша, чтобы быстро показывать изображения за счет снижения качества изображения. Но в этом случае я хочу загрузить в маленькую коробочку все изображение. Я знаю, что это убьет телефон.

Answer 1

по моему опыту, всегда используйте GridView.builder, больше эффективности, когда нужно показать много элементов. Во-вторых, всегда используйте миниатюру для листинга, иначе список будет очень медленным или даже скучным sh в конце. Подробно показывать только исходный размер изображения.