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

Во-первых, у каждого устройства есть соотношение размера экрана к его разрешению. Его можно измерить в виде DPI (dot per inch, точки на дюйм), так и в специальном соотношении, где при единице одна точка будет равна одному физическому пикселю. Из Flutter мы его можем получить через MediaQuery.devicePixelRatioOf(context).

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

Теперь, когда у нас определены размеры в точках, то нужно подготовить изображения. В прошлом посте мы писали, что максимальный - это размер, умноженный на 4. Но на самом деле мы готовим много одинаковых изображений - под devicePixelRatio со значениями 1x, 1.5x, 2x, 3x и 4x. Конечно, вы можете сделать и больше, но практика показывает, что этих размеров более, чем достаточно.

Далее важно их правильно хранить. Для этого в папке для ассетов нужно создать еще несколько - для всех соотношений, кроме самого маленького. Называем их мы таким образом: x{N} - где N - это 1.5, 2.0 и т. п. Наша структура будет выглядеть так:

assets/
—| images/
——| x1.5/
———| image.webp
——| x2.0/
———| image.webp
——| x3.0/
———| image.webp
——| x4.0/
———| image.webp
—| image.webp

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

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