Flutter rozmiar ekranu

Stworzyłem nową aplikację na flutterze i miałem problemy z rozmiarami ekranu podczas przełączania się między różnymi urządzeniami.

Stworzyłem aplikację przy użyciu rozmiaru ekranu Pixel 2XL, a ponieważ miałem kontenery z elementem podrzędnym ListView, poproszono mnie o podanie wysokości i szerokości kontenera.

Więc kiedy przełączam urządzenie na nowe urządzenie, pojemnik jest za długi i wyświetla błąd.

Jak mogę to zrobić, aby aplikacja była zoptymalizowana dla wszystkich ekranów?

Możesz użyć:

• double width = MediaQuery.of(context).size.width;
• double height = MediaQuery.of(context).size.height;

Aby uzyskać wysokość tylko SafeArea (dla iOS 11 i nowszych):

• var padding = MediaQuery.of(context).padding;
• double newheight = height - padding.top - padding.bottom;

Zdobycie widthjest łatwe, ale heightmoże być trudne , oto sposoby radzenia sobieheight

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

Poniższy kod czasami nie zwraca prawidłowego rozmiaru ekranu:

MediaQuery.of(context).size

Testowałem na SAMSUNG SM-T580, który zwraca {width: 685.7, height: 1097.1}zamiast rzeczywistej rozdzielczości 1920x1080.

Proszę użyć:

import 'dart:ui';

window.physicalSize;

MediaQuery.of(context).size.widthi MediaQuery.of(context).size.heightdziała świetnie, ale za każdym razem trzeba pisać wyrażenia takie jak szerokość / 20, aby ustawić określoną wysokość i szerokość.

Stworzyłem nową aplikację na flutterze i miałem problemy z rozmiarami ekranu podczas przełączania się między różnymi urządzeniami.

Tak, dostępna flutter_screenutil wtyczka umożliwiająca dostosowanie rozmiaru ekranu i czcionki. Pozwól, aby Twój interfejs użytkownika wyświetlał rozsądny układ na różnych rozmiarach ekranu!

Stosowanie:

Dodaj zależność ：

Przed instalacją sprawdź najnowszą wersję.

dependencies:
  flutter:
    sdk: flutter
  # add flutter_ScreenUtil
  flutter_screenutil: ^0.4.2

Dodaj następujące importy do swojego kodu Dart:

import 'package:flutter_screenutil/flutter_screenutil.dart';

Zainicjuj i ustaw rozmiar dopasowania i rozmiar czcionki zgodnie ze skalą zgodnie z opcją dostępności „rozmiar czcionki” systemu

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

Posługiwać się:

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

Proszę odnieść się zaktualizowaną dokumentację po więcej szczegółów

Uwaga: przetestowałem i używam tej wtyczki, która naprawdę działa świetnie na wszystkich urządzeniach, w tym na iPadzie

Mam nadzieję, że to komuś pomoże

Hej, możesz użyć tej klasy, aby uzyskać procentową szerokość i wysokość ekranu

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

i używać w ten sposób

Container(height: Responsive.width(100, context), width: Responsive.width(50, context),);

Jak uzyskać dostęp do rozmiaru ekranu, gęstości pikseli lub proporcji we flutter?

Możemy uzyskać dostęp do rozmiaru ekranu i innych, takich jak gęstość pikseli, współczynnik proporcji itp. Z pomocą MediaQuery.

syntex: MediaQuery.of (kontekst). rozmiar.wysokość

Po prostu zadeklaruj funkcję

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

Użyj jak poniżej

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

Zauważyliśmy, że korzystanie z MediaQueryklasy może być nieco kłopotliwe, a ponadto brakuje w niej kilku kluczowych informacji.

Tutaj mamy małą klasę pomocniczą Screen, której używamy we wszystkich naszych nowych projektach:

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

Używać

bool isLandscape = Screen.isLandscape(context)
bool isLargePhone = Screen.diagonal(context) > 720;
bool isTablet = Screen.diagonalInches(context) >= 7;
bool isNarrow = Screen.widthInches(context) < 3.5;

Aby uzyskać więcej, zobacz: https://blog.gskinner.com/archives/2020/03/flutter-simplify-platform-detection-responsive-sizing.html

Korzystając z poniższej metody, możemy uzyskać fizyczną wysokość urządzenia. Dawny. 1080X1920

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