Flutter 화면 크기

저는 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

{width: 685.7, height: 1097.1}실제 해상도 대신 반환되는 SAMSUNG SM-T580에서 테스트했습니다 1920x1080.

사용하시기 바랍니다:

import 'dart:ui';

window.physicalSize;

MediaQuery.of(context).size.width그리고 MediaQuery.of(context).size.height잘 작동하지만, 일련의 특정 높이를 폭 폭 / 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),);

Flutter에서 화면 크기 또는 픽셀 밀도 또는 종횡비에 액세스하는 방법은 무엇입니까?

MediaQuery의 도움으로 화면 크기 및 기타 픽셀 밀도, 종횡비 등에 액세스 할 수 있습니다.

syntex : MediaQuery.of (context) .size.height

함수를 선언하기 만하면됩니다.

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

아래와 같이 사용

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

우리는 MediaQuery클래스 를 사용하는 것이 약간 번거로울 수 있으며 몇 가지 주요 정보가 누락 되어 있음을 알았 습니다.

여기에 모든 새 프로젝트에서 사용하는 작은 화면 도우미 클래스가 있습니다.

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을 참조하십시오.

다음 방법을 사용하여 장치의 물리적 높이를 얻을 수 있습니다. 전의. 1080X1920

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