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

Question

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

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

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

Например: reflely.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();
          }
        },
      )

Виджет флаттера недели - Построитель макетов

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