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

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

### Указание ресурсов <a href="#specifying-assets" id="specifying-assets"></a>

Вот пример:

Flutter использует [`pubspec.yaml`](https://dart.dev/tools/pub/pubspec)файл, расположенный в корне вашего проекта, для определения ресурсов, необходимых приложению.

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

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

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

{% hint style="info" %}
**Включаются** только файлы, расположенные непосредственно в каталоге, если только внутри подкаталога нет файлов с таким же именем (см. [Варианты ресурсов](https://docs.flutter.dev/development/ui/assets-and-images#asset-variants) ). Чтобы добавить файлы, расположенные в подкаталогах, создайте запись для каждого каталога.
{% endhint %}

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

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

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

[`AssetImage`](https://api.flutter.dev/flutter/painting/AssetImage-class.html)понимает, как сопоставить логически запрошенный ресурс с тем, который наиболее точно соответствует текущему [соотношению пикселей устройства](https://api.flutter.dev/flutter/dart-ui/FlutterView/devicePixelRatio.html) . Чтобы это сопоставление работало, ресурсы должны быть расположены в соответствии с определенной структурой каталогов:

```
.../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.png`72px на 72px, то `.../3.0x/my_icon.png`должно быть 216px на 216px; но они оба отображают в 72px на 72px (в логических пикселях), если ширина и высота не указаны.

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

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

Чтобы загрузить изображение, используйте [`AssetImage`](https://api.flutter.dev/flutter/painting/AssetImage-class.html) класс в `build()`методе виджета.

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

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

Все, что использует набор ресурсов по умолчанию, наследует информацию о разрешении при загрузке изображений. (Если вы работаете с некоторыми классами более низкого уровня, такими как [`ImageStream`](https://api.flutter.dev/flutter/painting/ImageStream-class.html)или [`ImageCache`](https://api.flutter.dev/flutter/painting/ImageCache-class.html), вы также заметите параметры, связанные с масштабом.)

{% hint style="info" %}
[Соотношение пикселей устройства](https://api.flutter.dev/flutter/dart-ui/FlutterView/devicePixelRatio.html) зависит от [MediaQueryData.size](https://api.flutter.dev/flutter/widgets/MediaQueryData/size.html) , для которого требуется наличие либо [MaterialApp](https://api.flutter.dev/flutter/material/MaterialApp-class.html) , либо [CupertinoApp](https://api.flutter.dev/flutter/cupertino/CupertinoApp-class.html) в качестве предка вашего файла [`AssetImage`](https://api.flutter.dev/flutter/painting/AssetImage-class.html).
{% endhint %}

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

{% embed url="<https://docs.flutter.dev/development/ui/assets-and-images>" %}
