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

89

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

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

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

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

Том О'Салливан
источник
1
> У меня были контейнеры с дочерним элементом ListView, он попросил меня указать высоту и ширину контейнера. можешь уточнить? Вы можете создать представление списка, которое просто займет все пространство. Вы можете поделиться своим макетом?
wasyl

Ответы:

239

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

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

Чтобы получить высоту только SafeArea (для iOS 11 и выше):

  • var padding = MediaQuery.of(context).padding;
  • double newheight = height - padding.top - padding.bottom;
yashthakkar1173
источник
3
Как получить размер приложения без безопасной области
user7856586
43

Получить 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;
CopsOnRoad
источник
1
Большой! Как раз то, что я хотел. Безумие, что я не стал рассчитывать высоту безопасной области, чтобы рисовать мои виды. Интересно, что все это время шло не так? : D Ура!
Rohit TP
17

Приведенный ниже код иногда не возвращает правильный размер экрана:

MediaQuery.of(context).size

Я тестировал на SAMSUNG SM-T580, который возвращает {width: 685.7, height: 1097.1}вместо реального разрешения 1920x1080.

Пожалуйста, используйте:

import 'dart:ui';

window.physicalSize;
Ханс Чжан
источник
13
Похоже, MediaQuery.of(context).sizeвозвращает логические пиксели. Но то же самое будет использоваться другими виджетами Flutter. Таким образом, вы получите пропорциональные размеры, если вам это нужно. Если вам нужно точное значение пикселя устройства вы можете сделать что - то подобное, например , для ширины: MediaQuery.of(context).size.width * MediaQuery.of(context).devicePixelRatio. Я только что написал об этом статью на случай, если другие люди будут искать то же самое: medium.com/tagmalogic/…
Miha
5

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

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

Да, доступен 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's "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),
            ),

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

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

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

Рахул Махадик
источник
если вы используете этот плагин, это означает, что вы можете определить только 1 ширину и высоту, например, если вы используете iPhone 6 (iPhone6 ​​750 * 1334), тогда вам нужно использовать эти значения, но как это сделать его отзывчивым на всех разных iPhone ????
GY22 04
вы устанавливаете базовый дизайн только для одного размера экрана. Плагин корректно адаптируется к разным размерам экрана
Marc
1

Эй, вы можете использовать этот класс, чтобы получить ширину и высоту экрана в процентах

import 'package:flutter/material.dart';
class Responsive{
  static width(double p,BuildContext context)
  {
    return MediaQuery.of(context).size.width*(p/100);
  }
  static height(double p,BuildContext context)
  {
    return MediaQuery.of(context).size.height*(p/100);
  }
}

и использовать как это

Container(height: Responsive.width(100, context), width: Responsive.width(50, context),);
Нихил Биджу
источник
0

Как получить доступ к размеру экрана, плотности пикселей или соотношению сторон во флаттере?

Мы можем получить доступ к размеру экрана и другим параметрам, таким как плотность пикселей, соотношение сторон и т. Д. С помощью MediaQuery.

syntex: MediaQuery.of (контекст) .size.height

Mewadaarvind
источник
0

Просто объявите функцию

Size screenSize() {
return MediaQuery.of(context).size;
}

Используйте, как показано ниже

return Container(
      width: screenSize().width,
      height: screenSize().height,
      child: ...
 )
iOS Lifee
источник
0

Мы заметили, что использование MediaQueryкласса может быть немного обременительным, а также упускает несколько ключевых элементов информации.

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

class Screen {
  static double get _ppi => (Platform.isAndroid || Platform.isIOS)? 150 : 96;
  static bool isLandscape(BuildContext c) => MediaQuery.of(c).orientation == Orientation.landscape;
  //PIXELS
  static Size size(BuildContext c) => MediaQuery.of(c).size;
  static double width(BuildContext c) => size(c).width;
  static double height(BuildContext c) => size(c).height;
  static double diagonal(BuildContext c) {
    Size s = size(c);
    return sqrt((s.width * s.width) + (s.height * s.height));
  }
  //INCHES
  static Size inches(BuildContext c) {
    Size pxSize = size(c);
    return Size(pxSize.width / _ppi, pxSize.height/ _ppi);
  }
  static double widthInches(BuildContext c) => inches(c).width;
  static double heightInches(BuildContext c) => inches(c).height;
  static double diagonalInches(BuildContext c) => diagonal(c) / _ppi;
}

Использовать

bool isLandscape = Screen.isLandscape(context)
bool isLargePhone = Screen.diagonal(context) > 720;
bool isTablet = Screen.diagonalInches(context) >= 7;
bool isNarrow = Screen.widthInches(context) < 3.5;

Чтобы узнать больше, см. Https://blog.gskinner.com/archives/2020/03/flutter-simplify-platform-detection-responsive-sizing.html

Пареш Мангукия
источник
0

Используя следующий метод, мы можем получить физическую высоту устройства. Ex. 1080X1920

WidgetsBinding.instance.window.physicalSize.height
WidgetsBinding.instance.window.physicalSize.width
LittleRider
источник
5
Хотя этот код может решить вопрос, в том числе объяснение того, как и почему это решает проблему, действительно поможет улучшить качество вашего сообщения и, вероятно, приведет к большему количеству голосов за. Помните, что вы отвечаете на вопрос для будущих читателей, а не только для человека, который задает его сейчас. Пожалуйста , измените свой ответ , чтобы добавить объяснения и дать указание о том , что применять ограничения и допущения. Из отзыва
двойной сигнал