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

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

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

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

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

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

• 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;

Получить 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;

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

MediaQuery.of(context).size

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

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

import 'dart:ui';

window.physicalSize;

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.

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

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

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

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

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

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

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

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

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

return Container(
      width: screenSize().width,
      height: screenSize().height,
      child: ...
 )

Мы заметили, что использование 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

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

WidgetsBinding.instance.window.physicalSize.height
WidgetsBinding.instance.window.physicalSize.width