Нажимая на кнопку «принять
cookie», вы становитесь настоящим amigoи не только делаете мир лучше, но
и попадаете в наше сердечко
-->
Решаем трудности адаптации мобильных приложений с Responsive_framework
Hola, Amigos! Меня зовут Ярослав Цемко, я Flutter-разработчик в компании заказной разработки Amiga. Сейчас я расскажу об очень крутом плагине, который помог нам решить проблемы, связанные с адаптацией контента под разные дисплеи в одном из наших проектов.
Но как только мы пытаемся запустить тоже самое, но на планшете с разрешением 1080x1920 при плотности пикселей 440 dpi, у нас все объекты становятся очень большими, а страница авторизации уже не влезает в экран.
Для начала внутри MaterialApp мы пропишем ResponsiveBreakpoints, чтобы в последствии мы могли использовать определенные брейкпоинты.
// Ширина от 0 до 400 для планшета с низким разрешением
Breakpoint(start: 0, end: 400, name: MOBILE),
// Ширина от 401 до 1400 для телефона
Breakpoint(start: 401, end: 1400, name: TABLET),
],
child: child!,
),
…
);
Для решения данной проблемы мы будем использовать ResponsiveScaledBox. Тот самый компонент, который позволяет масштабировать дочерние виджеты. Для этого оборачиваем все дерево виджетов странички и задаем оптимальную ширину.
return ResponsiveScaledBox(
width: 1200,
child: Scaffold(
…
);
Получается симпатичный результат для планшета.
Но если мы запустим такое приложение на телефоне, то на нем уже элементы слишком маленькие.
В этой ситуации нам как раз и понадобятся брейкпоинты, которые мы объявили ранее, и их мы используем внутри ResponsiveValue.