Во
Flutter размеры задаются в точках, а не в пикселях. Одна точка может соответствовать разному количеству пикселей в зависимости от плотности экрана. Чтобы изображение выглядело одинаково хорошо на всех устройствах, нужно подготовить несколько версий одного и того же файла под разные коэффициенты масштабирования.
Что такое devicePixelRatio:
Коэффициент
devicePixelRatio показывает, сколько физических пикселей содержится в одной логической точке. На старых устройствах это 1x. На современных - 2x, 3x и даже 4x. Чем выше коэффициент, тем больше пикселей нужно для отображения одной точки.
Flutter автоматически выбирает нужную версию изображения, основываясь на плотности экрана устройства.
Сколько версий нужно:
Обычно достаточно подготовить изображения для коэффициентов 1x, 1.5x, 2x, 3x и 4x. Больше требуется редко. Меньше - может привести к размытию на устройствах с высокой плотностью экрана.
Каждая версия должна иметь размер, соответствующий ее коэффициенту. Например, если изображение в точках имеет размер 100x100, то для 2x нужно подготовить 200x200 пикселей, для 3x - 300x300.
Как организовать хранение:
Flutter ожидает, что файлы для разных коэффициентов будут лежать в отдельных папках. Имена папок должны соответствовать коэффициенту: x1.5, x2.0, x3.0, x4.0.
assets/
images/
x1.5/
photo.png
x2.0/
photo.png
x3.0/
photo.png
x4.0/
photo.png
photo.png
В
pubspec.yaml достаточно указать корневую папку.
Flutter сам найдет нужные файлы в зависимости от плотности экрана.
flutter:
assets:
- assets/images/
Что важно помнить:
Flutter использует точки для отрисовки, а не пиксели. Поэтому максимальный размер изображения в точках - это его предел на экране. Увеличение размера сверх этого предела не имеет смысла, так как изображение все равно не будет отображаться больше своей логической области.
Для расчета максимального размера учитывайте размер виджета на экране, а не размер экрана целиком.
Вывод:
Подготовка изображений под разные плотности экрана - обязательный шаг для качественного отображения. Несколько версий файлов в папках x1.5, x2.0, x3.0, x4.0 и правильное указание в
pubspec.yaml - все, что нужно.
Flutter делает выбор автоматически. Разработчику остается только подготовить ассеты и правильно организовать структуру. Это несложно, но влияет на внешний вид приложения на устройствах с разными экранами.
