Как добавить отступы или поля для разных размеров экрана

Question

Я хочу указать отступ или поле в соответствии с размерами экрана.

Ниже приведен код и изображения двух экранов разных размеров с одинаковым заполнением.

Это мой код:

    Padding(
            padding: const EdgeInsets.only(top: 160, left: 90, bottom: 20),
            child: Row(
              children: <Widget>[
                Image.asset(
                  'assets/logo.png',
                  height: 70,
                  width: 70,
                ),
                Text(
                  '  Whatsapp',
                  style: TextStyle(
                    fontSize: 26,
                    color: Colors.white,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ],
            ),
          ),

Мое настоящее устройство

Android Эмулятор Studio

Answer 1

Вы можете использовать MediaQuery.of(context).size.height, чтобы получить высоту экрана и MediaQuery.of(context).size.width, чтобы получить ширину экрана.

В соответствии с вашим изображением, лучше использовать виджеты Flex, такие как Expanded, Spacer, Flexible для регулировки расстояния между виджетами внутри столбца.

Answer 2

Вы можете создать два метода, которые принимают BuildContext

double deviceHeight(BuildContext context) => MediaQuery.of(context).size.height;

double deviceWidth(BuildContext context) => MediaQuery.of(context).size.width;

И если вы хотите, чтобы поля были одинаковыми независимо от ширины или высоты устройства, используйте его так:

Padding(
        padding: EdgeInsets.only(
          top: deviceHeight(context) * 0.3,
          left: deviceWidth(context) * 0.09,
          bottom: deviceHeight(context) * 0.06,
        ),
        child: Row(
          children: <Widget>[
            Image.asset(
              'assets/logo.png',
              height: 70,
              width: 70,
            ),
            Text(
              '  Whatsapp',
              style: TextStyle(
                fontSize: 26,
                color: Colors.white,
                fontWeight: FontWeight.bold,
              ),
            ),
          ],
        ),
      ),

deviceHeight(context) * 0.3 просто означает 30% высоты экрана, deviceWidth(context) * 0.09 означает 9% ширины экрана & bottom: deviceHeight(context) * 0.06 означает 6% высоты экрана

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