Добавление ресурсов и изображений

Приложения Flutter могут включать как код, так и ресурсы. Ресурс — это файл, который связан и развернут вместе с вашим приложением и доступен во время выполнения. Общие типы ресурсов включают статические данные (например, файлы JSON), файлы конфигурации, значки и изображения (JPEG, WebP, GIF, анимированные WebP/GIF, PNG, BMP и WBMP).

Указание ресурсов

Вот пример:

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

flutter:
  assets:
    - directory/
    - directory/subdirectory/

Чтобы включить все активы в каталоге, укажите имя каталога с /символом в конце:

flutter:
  assets:
    - assets/my_icon.png
    - assets/background.png

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

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

Flutter может загружать изображения с разрешением, соответствующим текущему соотношению пикселей устройства.

Объявление ресурсов изображения с поддержкой разрешения

AssetImageпонимает, как сопоставить логически запрошенный ресурс с тем, который наиболее точно соответствует текущему соотношению пикселей устройства . Чтобы это сопоставление работало, ресурсы должны быть расположены в соответствии с определенной структурой каталогов:

.../image.png
.../Mx/image.png
.../Nx/image.png
...etc.

Где M и N — числовые идентификаторы, соответствующие номинальному разрешению содержащихся в них изображений. Другими словами, они определяют соотношение пикселей устройства, для которого предназначены изображения.

Предполагается, что основной актив соответствует разрешению 1.0. Например, рассмотрим следующий макет ресурса для изображения с именем my_icon.png:

.../my_icon.png
.../2.0x/my_icon.png
.../3.0x/my_icon.png

На устройствах с соотношением пикселей устройства 1,8 .../2.0x/my_icon.pngвыбирается ресурс. .../3.0x/my_icon.pngАктив выбран для соотношения пикселей устройства 2,7 .

Если ширина и высота визуализируемого изображения не указаны в Imageвиджете, номинальное разрешение используется для масштабирования актива, чтобы он занимал столько же места на экране, сколько и основной актив, только с более высоким разрешением. То есть, если .../my_icon.png72px на 72px, то .../3.0x/my_icon.pngдолжно быть 216px на 216px; но они оба отображают в 72px на 72px (в логических пикселях), если ширина и высота не указаны.

Каждая запись в разделе актива pubspec.yaml должна соответствовать реальному файлу, за исключением основной записи актива. Если основная запись ресурса не соответствует реальному файлу, ресурс с самым низким разрешением используется в качестве запасного для устройств с соотношением пикселей устройства ниже этого разрешения. Однако запись должна быть включена в pubspec.yamlманифест.

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

Чтобы загрузить изображение, используйте AssetImage класс в build()методе виджета.

Например, ваше приложение может загрузить фоновое изображение из описанных выше объявлений активов:

return const Image ( image : AssetImage ( 'graphics/background.png' ));   

Все, что использует набор ресурсов по умолчанию, наследует информацию о разрешении при загрузке изображений. (Если вы работаете с некоторыми классами более низкого уровня, такими как ImageStreamили ImageCache, вы также заметите параметры, связанные с масштабом.)

Соотношение пикселей устройства зависит от MediaQueryData.size , для которого требуется наличие либо MaterialApp , либо CupertinoApp в качестве предка вашего файла AssetImage.

Подробная документация

Adding assets and imagesflutterdev