Виджет Image — это мощный и гибкий инструмент, который позволяет отображать изображения из различных источников, включая локальные файлы, сетевые ресурсы и пакеты ресурсов. Он поддерживает много форматов, включая JPEG, PNG, GIF и WebP, и может отображать изображения любого размера или разрешения.

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

Навигация по статье

Создание виджета Image

Чтобы создать виджет изображения в Flutter, вам необходимо указать источник изображения, используя конструктор Image.network для загрузки изображения по сети или конструктор Image.asset для добавления из локальных источников. В следующем примере показано, как создать виджет изображения, который загружает картинку по ссылке:

Image.network(
  'https://example.com/image.jpg',
);

В приведенном выше примере мы использовали конструктор Image.network для создания виджета изображения, который отображает изображение из сети. Конструктор Image.network принимает строковый аргумент, который указывает URL изображения.

Аналогично, вы можете использовать конструктор Image.asset для отображения изображения из локального источника вашего приложения:

Image.asset(
  'assets/images/image.jpg',
);

В приведенном выше примере мы использовали конструктор Image.asset для создания виджета изображения, который отображает изображение из локального источника. Конструктор Image.asset принимает строковый аргумент, который указывает путь к изображению в локальной директории.

Асинхронная загрузка изображений

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

Виджет FadeInImage позволяет отображать изображение-заполнитель во время загрузки фактического изображения из сети или локального источника. Когда изображение загружено, изображение-заполнитель автоматически заменяется фактическим изображением. В следующем примере показано, как использовать FadeInImage для отображения изображения из сети:

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

CachedNetworkImage — это виджет, который предоставляет более продвинутый механизм асинхронной загрузки изображений. Он кэширует изображения локально, чтобы повысить производительность приложения, и предоставляет дополнительные функции, такие как заполнители, обработка ошибок и многое другое. В следующем примере показано, как использовать кэшированный пакет сетевых изображений для отображения изображения из сети:

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

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

Масштабирование и обрезка изображения

Чтобы картинки соответствовали определенному размеру или соотношению сторон в приложении можно воспользоваться свойствами масштабирования и обрезки. Виджет Text предоставляет несколько опций для масштабирования и обрезки изображений, включая свойства fit and alignment.

Свойство fit

Свойство fit указывает, как следует масштабировать изображение, чтобы оно поместилось в доступном пространстве.

Вот основные значения свойства fit в виджете изображений Flutter:

BoxFit.contain: Масштабирует изображение так, чтобы оно помещалось в пределах доступного пространства, сохраняя при этом его соотношение сторон. Все изображение может быть невидимым, и вокруг изображения может быть пустое пространство.
BoxFit.cover: Масштабирует изображение так, чтобы оно занимало все доступное пространство, сохраняя при этом его соотношение сторон. Некоторые части изображения могут быть обрезаны, и все изображение может быть невидимым.
BoxFit.fill: Масштабирует изображение, чтобы полностью заполнить доступное пространство, без учета его соотношения сторон. Это может привести к искажению или растягиванию изображения.
BoxFit.fitWidth: Масштабирует изображение так, чтобы оно соответствовало ширине доступного пространства, сохраняя при этом его соотношение сторон. Высота изображения может быть меньше доступного пространства, в результате чего над и/или под изображением образуется пустое пространство.
BoxFit.fitHeight: Масштабирует изображение так, чтобы оно соответствовало высоте доступного пространства, сохраняя при этом его соотношение сторон. Ширина изображения может быть меньше доступного пространства, в результате чего слева и/или справа от изображения образуется пустое пространство.
BoxFit.none: Не масштабирует изображение. Все изображение будет видно, независимо от доступного пространства.
BoxFit.scaleDown: Масштабирует изображение так, чтобы оно помещалось в пределах доступного пространства, сохраняя его соотношение сторон, но только в том случае, если размер изображения превышает доступное пространство. Если изображение меньше доступного пространства, оно вообще не будет масштабироваться.

В следующем примере показано, как использовать свойство fit для масштабирования изображения так, чтобы оно помещалось в контейнер:

Container(
  width: 200,
  height: 200,
  child: Image.network(
    'https://example.com/image.jpg',
    fit: BoxFit.cover,
  ),
);

Свойство alignment

Свойство alignment указывает, как изображение должно быть выровнено в пределах доступного пространства.

Вот основные значения свойства alignment в виджете изображений Flutter:

Alignment.topLeft: Выравнивает изображение по верхнему левому углу доступного пространства.
Alignment.topCenter: Выравнивает изображение по верхнему центру доступного пространства.
Alignment.topRight: Выравнивает изображение по правому верхнему углу доступного пространства.
Alignment.centerLeft: Выравнивает изображение по левому центру доступного пространства.
Alignment.center: Выравнивает изображение по центру доступного пространства.
Alignment.centerRight: Выравнивает изображение по правому центру доступного пространства.
Alignment.bottomLeft: Выравнивает изображение по левому нижнему углу доступного пространства.
Alignment.bottomCenter: Выравнивает изображение по нижнему центру доступного пространства.
Alignment.bottomRight: Выравнивает изображение по правому нижнему углу доступного пространства.

В следующем примере показано, как использовать свойство alignment для выравнивания изображения внутри контейнера:

Container(
  width: 200,
  height: 200,
  child: Image.network(
    'https://example.com/image.jpg',
    fit: BoxFit.cover,
    alignment: Alignment.topRight,
  ),
);

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

Заключение

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