Размер экрана флаттера

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

Я создал приложение, используя размер экрана Pixel 2XL, и потому, что у меня были контейнеры с дочерним элементом ListView, он попросил указать высоту и ширину для контейнера.

Поэтому, когда я переключаю устройство на новое устройство, контейнер слишком длинный и выдает ошибку.

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

Ответы

Ответ 1

Ты можешь использовать:

  • double width = MediaQuery.of(context).size.width;
  • double height = MediaQuery.of(context).size.height;

Ответ 2

Получить width легко, но height может быть хитрым, ниже приведены способы борьбы с height

// full screen width and height
double width = MediaQuery.of(context).size.width;
double height = MediaQuery.of(context).size.height;

// height without SafeArea
var padding = MediaQuery.of(context).padding;
double height1 = height - padding.top - padding.bottom;

// height without status bar
double height2 = height - padding.top;

// height without status and toolbar
double height3 = height - padding.top - kToolbarHeight;

Ответ 3

MediaQuery.of(context).size.width и MediaQuery.of(context).size.height прекрасно работают, но каждый раз нужно писать выражения, такие как width/20, чтобы установить конкретную высоту width.

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

Да, flutter_screenutil плагин доступен для настройки экрана и размера шрифта. Пусть ваш пользовательский интерфейс отображает разумный макет на разных размерах экрана!

Использование:

Добавить зависимость:

Пожалуйста, проверьте последнюю версию перед установкой.

dependencies:
  flutter:
    sdk: flutter
  # add flutter_ScreenUtil
  flutter_screenutil: ^0.4.2

Добавьте следующий код в код Dart:

import 'package:flutter_screenutil/flutter_screenutil.dart';

Инициализируйте и установите размер подгонки и размер шрифта для масштабирования в соответствии с системным параметром доступности "размер шрифта"

//fill in the screen size of the device in the design

//default value : width : 1080px , height:1920px , allowFontScaling:false
ScreenUtil.instance = ScreenUtil()..init(context);

//If the design is based on the size of the iPhone6 ​​(iPhone6 ​​750*1334)
ScreenUtil.instance = ScreenUtil(width: 750, height: 1334)..init(context);

//If you wang to set the font size is scaled according to the system "font size" assist option
ScreenUtil.instance = ScreenUtil(width: 750, height: 1334, allowFontScaling: true)..init(context);

Использование:

//for example:
//rectangle
Container(
           width: ScreenUtil().setWidth(375),
           height: ScreenUtil().setHeight(200),
           ...
            ),

////If you want to display a square:
Container(
           width: ScreenUtil().setWidth(300),
           height: ScreenUtil().setWidth(300),
            ),

Подробнее см. обновленную документацию for more details

.Примечание. Я протестировал и использовал этот плагин, который отлично работает на всех устройствах, включая iPad

.Надеюсь, это поможет кому-то