Во Flutter отображение изображений, полученных из сети, требует эффективной обработки, чтобы обеспечить удобство работы пользователя. Одним из распространенных требований является отображение индикатора загрузки во время загрузки изображения. В этой статье мы рассмотрим несколько способов добиться этого во Flutter, а также приведем примеры кода.

Метод 1: использование CircularProgressIndicator

Flutter предоставляет встроенный виджет под названием CircularProgressIndicator, который может служить индикатором загрузки. Вот пример того, как использовать его с NetworkImage:

Image.network(
  'https://example.com/image.jpg',
  loadingBuilder: (BuildContext context, Widget child, ImageChunkEvent loadingProgress) {
    if (loadingProgress == null)
      return child;
    return Center(
      child: CircularProgressIndicator(
        value: loadingProgress.expectedTotalBytes != null
            ? loadingProgress.cumulativeBytesLoaded / loadingProgress.expectedTotalBytes
            : null,
      ),
    );
  },
);

Метод 2: собственный виджет индикатора загрузки

Если вы предпочитаете собственный индикатор загрузки, вы можете создать отдельный виджет для его отображения. Вот пример:

class CustomLoadingIndicator extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: CircularProgressIndicator(),
    );
  }
}
class MyImage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Image.network(
      'https://example.com/image.jpg',
      loadingBuilder: (BuildContext context, Widget child, ImageChunkEvent loadingProgress) {
        if (loadingProgress == null)
          return child;
        return CustomLoadingIndicator();
      },
    );
  }
}

Метод 3: постепенное появление изображения с помощью заполнителя

Чтобы создать плавный переход загрузки, вы можете использовать виджет FadeInImage вместе с изображением-заполнителем. Вот пример:

FadeInImage(
  placeholder: AssetImage('assets/placeholder.jpg'),
  image: NetworkImage('https://example.com/image.jpg'),
);

Метод 4: пакет CachedNetworkImage

Пакет cached_network_imageпредоставляет дополнительные функции для кэширования и отображения сетевых изображений. Он также поддерживает индикатор загрузки. Сначала добавьте пакет в файл pubspec.yaml:

dependencies:
  cached_network_image: ^3.0.0

Затем используйте виджет CachedNetworkImage:

CachedNetworkImage(
  imageUrl: 'https://example.com/image.jpg',
  placeholder: (context, url) => CircularProgressIndicator(),
  errorWidget: (context, url, error) => Icon(Icons.error),
);

В этой статье мы рассмотрели несколько методов отображения индикатора загрузки при получении сетевых изображений во Flutter. Вы можете выбрать метод, который лучше всего соответствует вашим потребностям и повышает удобство использования. Независимо от того, используете ли вы встроенный CircularProgressIndicator, создаете собственный индикатор загрузки или используете такие пакеты, как cached_network_image, теперь у вас есть инструменты для реализации эффективных индикаторов загрузки в ваших приложениях Flutter.

Не забудьте выбрать метод, который соответствует вашим требованиям к дизайну и обеспечивает удобство визуального восприятия для ваших пользователей.