Как изменить размер столбца в строке для адаптивного экрана?

Question

Я создаю целевую страницу приложения в Flutter для веб-сайтов. Мне нужно, чтобы страница реагировала на экран другого размера.

Я использую MediaQuery для изменения макета для маленького экрана, так что виджет верстки.

Но для экрана среднего размера макет горизонтальный. Поэтому мне нужно изменить размер скриншота приложения, когда экран становится меньше. Как сделать?

Например: https://reflectly.app/

Вот мой код пока:

Row(
                            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                            children: <Widget>[
                              Column(
                                mainAxisAlignment: MainAxisAlignment.center,
                                children: <Widget>[
                                  CenterText(),
                                  SizedBox(height: 10),
                                  Row(
                                    children: <Widget>[
                                      DownloadButtons()                                    ],
                                  ),
                                ],
                              ),
                              Column(
                                children: <Widget>[
                                  Screenshot(),
                                ],
                              ),
                            ],
                          )

Answer 1

Вам нужно знать LayoutBuilder Компонент, который является то, что вы хотите и исправляет ваши потребности.

LayoutBuilder принимает два параметра, один contextВторое constraints, С этими ограничениями вы можете настроить отображение разных макетов для разных экранов.

Проверьте этот пример:

LayoutBuilder(
        builder: (context, constraints) {
          if(constraints.maxHeight < 768 && constraints.maxWidth < 1270) {
            return smallDesignContent();
          } else {
            return bigDefaultDesignContent();
          }
        },
      )

Виджет флаттера недели - Компоновщик макетов

Документация