Flutter Image — работа с изображениями во Флаттере

Изображения широко используются в мобильных приложениях. Flutter Image предоставляет четыре различных способа использования изображений.

Загрузка изображения с удаленных серверов.
Загрузка изображений из ресурсов assets.
Изображения из файловой системы.
Создание изображений из двоичных данных.

В этой статье рассматриваются только первые два сценария использования.

Для визуального понимания работы, посмотрите простое видео на английском языке про Image Flutter:

Видео про Image Flutter для начинающих

Загрузка изображений с удаленных серверов

Это самый простой сценарий использования изображений. Изображения хранятся на удаленных серверах. Мы просто загружаем изображения по URL-адресам. Image.network создает виджет для отображения изображения, загруженного по URL-адресу. Аргумент src указывает URL-адрес изображения.

Cледующий код Image.network('https://picsum.photos/300?random') создает новый виджет с изображением, загруженным с заданного URL.

Пользовательский заголовок Flutter Image

Если для получения изображения требуются пользовательские заголовки, можно использовать заголовки аргументов типа Map. Типичным примером является доступ к защищенным образам, которые требуют пользовательских заголовков для проверки подлинности.

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

Image.network(
  'https://picsum.photos/300?random',
  headers: {
    'Authentication': 'Basic xxxxx',
  },
)

Кэширование изображений

Все изображения загружаются с помощью Image.network кэшируются независимо от заголовков ответов HTTP. Это означает, что до тех пор, пока URL-адрес изображения не изменится, изображение не будет обновлено, даже если его содержимое может быть изменено на удаленном сервере. Вы можете использовать cache-buster для принудительной загрузки изображений.

Загрузка изображений из ресурсов

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

В файле pubspec.yaml, он объявляет изображение ресурса в пути assets/images/sample.png.

flutter:
  assets:
    - assets/images/sample.png

Вывод изображений Image Flutter

При использовании виджетов изображений мы должны указать их размер с помощью аргументов height или width или поместить виджеты изображений в контекстах, устанавливающих жесткие ограничения компоновки. Это гарантирует, что макет не изменится при загрузке изображения. В противном случае изображение может сначала не занимать места, а затем расшириться до своего фактического размера. Это значит, что другие виджеты будут «отталкиваются» от этого изображения.

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

Ниже код демонстрирует это. Размер изображения фиксируется с помощью аргументов width и height. Виджет Text занимает оставшееся пространство с помощью виджета Expanded.

Widget _generateItem(int index) {
  log.info('Generate item $index');
  return new Container(
    padding: const EdgeInsets.all(8.0),
    child: new Row(
      children: <Widget>[
        new Image.network(
          'http://via.placeholder.com/200x100?text=Item$index',
          width: 200.0,
          height: 100.0,
        ),
        new Expanded(child: new Text('Item $index'))
      ],
    ),
  );
}

Иконки

Для добавления иконок, используйте Flutter Icons, это более простой вариант добавления изображений в приложение.

Перевод. Оригинал на английском: flutter-academy.com