Я создал новое приложение по флаттеру, и у меня возникли проблемы с размерами экрана при переключении между разными устройствами.
Я создал приложение, используя размер экрана Pixel 2XL, и, поскольку у меня были контейнеры с дочерними элементами ListView, меня попросили указать высоту и ширину для контейнера.
Поэтому, когда я переключаю устройство на новое устройство, контейнер становится слишком длинным и выдает ошибку.
Как мне сделать так, чтобы приложение было оптимизировано для всех экранов?
dart
screen
flutter
screen-size
Том О'Салливан
источник
источник
Ответы:
Вы можете использовать:
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;
источник
Приведенный ниже код иногда не возвращает правильный размер экрана:
Я тестировал на SAMSUNG SM-T580, который возвращает
{width: 685.7, height: 1097.1}
вместо реального разрешения1920x1080
.Пожалуйста, используйте:
import 'dart:ui'; window.physicalSize;
источник
MediaQuery.of(context).size
возвращает логические пиксели. Но то же самое будет использоваться другими виджетами Flutter. Таким образом, вы получите пропорциональные размеры, если вам это нужно. Если вам нужно точное значение пикселя устройства вы можете сделать что - то подобное, например , для ширины:MediaQuery.of(context).size.width * MediaQuery.of(context).devicePixelRatio
. Я только что написал об этом статью на случай, если другие люди будут искать то же самое: medium.com/tagmalogic/…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
источник