Блог

Главная - Вопросы по программированию - Как добавить дополнение, которое остается адаптивным к платформе в соответствии с экранами?

Как добавить дополнение, которое остается адаптивным к платформе в соответствии с экранами?

#android #flutter #dart

#Android #флаттер #dart

Вопрос:

Медиа-запрос не помогает в этом EdgeInsets.only() случае или, может быть, в том случае, который я не понял. Я использовал padding: EdgeInsets.all(MediaQuery.of(context).size.width/10) , но это не помогло в «единственном» случае.

     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,
          ),
        ),
      ],
    ),
  ),

Комментарии:

1. Вы можете использовать MediaQuery, однако это должно быть каждое из них. Так, например: padding: const EdgeInsets.only(top: 160, left: MediaQuery.of(context).size.width/10, bottom: MediaQuery.of(context).size.width/10)

Ответ №1:

Вот пакет, который вы можете использовать

https://pub.dev/packages/flutter_screenutil

Добавьте зависимость в ваш файл pubspec.yaml:

 flutter_screenutil: <latest version>

Инициализируйте пакет в методе сборки с помощью высоты и ширины экрана. Вы можете получить это из MediaQuery.

 final Size size = MediaQuery.of(context).size;
ScreenUtil.init(context,
              width: size.width,
              height: size.height,
              allowFontScaling: false);

Теперь вы можете перейти к добавлению.w и .h к значениям заполнения. «.w» возвращает долю от того, к какому значению оно добавляется относительно ширины экрана. «.h» делает то же самое, но с высотой экрана.

 Padding(
        padding: const EdgeInsets.only(top: 160.h, left: 90.w, bottom: 20.h),
        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,
              ),
            ),
          ],
        ),
      ),