Как создать адаптивную сетку в приложении флаттера? - PullRequest
Новая
       18

Как создать адаптивную сетку в приложении флаттера?

1 голос
/ 08 июля 2019

Что такое лучшая практика , чтобы сделать приложение для флаттера отзывчивым ? В приведенном ниже коде есть StraggeredGridView с жестко закодированными значениями .

Должен ли я написать метод, который вычисляет значения в зависимости от размера экрана, или есть другие способы сделать это?

Спасибо за вашу помощь! 

  StaggeredGridView.count(
    crossAxisCount: 2,
    crossAxisSpacing: 20,
    mainAxisSpacing: 20,
    padding: EdgeInsets.symmetric(horizontal: 20.0, vertical: 20),
    //shrinkWrap: true,
    children: <Widget>[
      _buildTile(
          Padding(
              padding: const EdgeInsets.all(20.0),
            child: Column(children: <Widget>[
              Material(
                  color: Color.fromRGBO(123, 228, 193, 0.5),
                  child: Padding(
                    padding: const EdgeInsets.all(15.0),
                    child: Image.asset(
                      'assets/siren.png',
                      height: 40,
                    ),
                  )),
              Padding(padding: EdgeInsets.only(bottom: 10.0)),
              Text('NOTRUF', style: tileFontStyle),
            ]),
          ),),

Ответы [ 2 ]

1 голос
/ 08 июля 2019

layoutBuilder как @ Abbas.M упомянутое - это возможность. Вы также можете использовать mediaQuery 

    var deviceData = MediaQuery.of(context); 
    var screenSize = MediaQuery.of(context).size;
    var deviceOrientation = MediaQuery.of(context).orientation;

    if (screenSize.width > oneColumnLayout) {
      ...
    } else {
      ...
    }

как данные устройства, размер экрана или ориентация, но также анимация и другие вещи, которые действительно помогают.

1 голос
/ 08 июля 2019

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

Вы также можете использовать некоторые виджеты, которые выполняют масштабирование самостоятельно, например layoutBuilder Подробнее здесь

...