#flutter #responsive-design #flutter-layout
#flutter #адаптивный дизайн #flutter-макет
Вопрос:
Я хочу создать ту же страницу для веб-и мобильной части flutter, для быстрого реагирования я использую пакет sizer https://pub.dev/packages/sizer . Но дизайн слишком велик для веб-части и идеально подходит для мобильной части.
Пожалуйста, подскажите мне, как создать одинаковый дизайн страницы для мобильных устройств и Интернета.
Пожалуйста, обратитесь к приведенной ниже ссылке на GitHub для получения более подробной информации https://github.com/TechnoUrmish/Sizer/issues/38
Ответ №1:
вам нужно создать два макета, один для веб- и один для мобильных устройств, и по размеру экрана, на котором работает ваше приложение, определите, какой макет вы показываете. это пример кода, который вам нужен для этого действия :
Scaffold(body: new LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) {
if(constraints.maxWidth > 1080 || constraints.maxHeight > 1920) {
return "DesktopLayout"
} else {
return "MobileLayout"
}
}
), )
Комментарии:
1. @saaeed bayat Я создал дизайн макета flutter для web, дизайн веб-страницы выглядит хорошо в браузере, а та же веб-страница выглядит плохо в мобильном браузере. Мой текущий обходной путь — if(platform.isWeb) означает возврат веб-макета, а также мобильного макета.
2. Пожалуйста, предоставьте идеальное решение для этого
3. значения 1080 и 1920 отображаются по-разному в разных макетах?
4. не могли бы вы поделиться рабочим кодом для этого
5. вы должны поместить свой макет рабочего стола в «DesktopLayout», а свой мобильный макет — в «MobileLayout», но вы не можете скопировать свой текущий код в оба, вам нужно создать другую мобильную версию и поместить ее в «MobileLayout»