Изменение размеров экрана в веб-приложении Flutter

Question

Я создаю веб-приложение с Flutter, но хочу имитировать c экран iPhone. Я знаю, что изменение размера окна может как бы достичь этого эффекта, но есть ли способ обернуть все содержимое в рамку графика экрана телефонаi c или изменить размеры приложения MaterialApp так, чтобы оно содержалось внутри экрана габариты телефона и не занимает все окно?

Answer 1

Похоже, вы просто хотите протестировать свой адаптивный дизайн или просто протестировать его на дисплеях разного размера / формы. Хотя метод, который вы предлагаете и предоставляет @Pegasis, должен работать, вероятно, лучшим решением будет использование Device Mode в Chrome DevTools .

Для этого:

1. Откройте Chrome DevTools, используя Ctrl + shift + i, щелкнув страницу правой кнопкой мыши и выполнив «Проверить элемент», или откройте меню Chrome в верхнем правом углу в окне браузера и выберите Дополнительные инструменты> Инструменты разработчика

2. Щелкните Toggle Device Toolbar, чтобы открыть пользовательский интерфейс, позволяющий имитировать мобильное окно просмотра.

3. Use the dropdown at the top to choose a device(including iPhones) or choose responsive to do a custom dimension. Панель инструментов устройства

Answer 2

Вы можете заключить MaterialApp в SizedBox, чтобы ограничить его размер. Затем вы можете использовать его где угодно, как обычный виджет.

пример