屏幕抖动

我在flutter上创建了一个新应用程序，并且在不同设备之间切换时屏幕尺寸出现问题。

我使用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上创建了一个新应用程序，并且在不同设备之间切换时屏幕尺寸出现问题。

是的，该flutter_screenutil 插件可用于调整屏幕和字体大小。让您的UI在不同的屏幕尺寸上显示合理的布局！

用法：

添加依赖项：

安装前请检查最新版本。

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（context）.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-sensitive-sizing.html

使用以下方法，我们可以获得设备的物理高度。例如 1080X1920

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