👣 Работа с растровыми изображениями во Flutter
Во 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/
🔗 Читать подробнее
💡 Вывод:
Подготовка изображений под разные плотности экрана - обязательный шаг для качественного отображения. Несколько версий файлов в папках x1.5, x2.0, x3.0, x4.0 и правильное указание в pubspec.yaml - все, что нужно.
Flutter делает выбор автоматически. Разработчику остается только подготовить ассеты и правильно организовать структуру. Это несложно, но влияет на внешний вид приложения на устройствах с разными экранами.
Подписаться на канал:
➡️ Flutter & Dart | Мобильный трудоголик
Во 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/
🔗 Читать подробнее
💡 Вывод:
Подготовка изображений под разные плотности экрана - обязательный шаг для качественного отображения. Несколько версий файлов в папках x1.5, x2.0, x3.0, x4.0 и правильное указание в pubspec.yaml - все, что нужно.
Flutter делает выбор автоматически. Разработчику остается только подготовить ассеты и правильно организовать структуру. Это несложно, но влияет на внешний вид приложения на устройствах с разными экранами.
Подписаться на канал:
➡️ Flutter & Dart | Мобильный трудоголик