[dart] Flutter 화면 크기

Program / 글쓴이

저는 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: ...
 )