Flutter rozmiar ekranu

89

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?

Tom O'Sullivan
źródło
1
> Miałem kontenery z elementem potomnym ListView, proszono mnie o podanie wysokości i szerokości kontenera. możesz wyjaśnić? Możesz utworzyć widok listy, który po prostu zajmuje całą przestrzeń. Czy możesz udostępnić swój układ?
wasyl

Odpowiedzi:

239

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;
yashthakkar1173
źródło
3
Jak uzyskać rozmiar aplikacji bez bezpiecznego obszaru
user7856586
43

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;
CopsOnRoad
źródło
1
Świetny! Właśnie tego chciałem. To szalone, że pominąłem obliczenie wysokości bezpiecznego obszaru, aby narysować moje widoki. Przez cały ten czas zastanawiałem się, co się dzieje! : D Pozdrawiam!
Rohit TP,
17

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;
Hans Zhang
źródło
13
Wygląda na to, że MediaQuery.of(context).sizezwraca logiczne piksele. Ale to samo będzie używane przez inne widżety Flutter. Więc w sumie otrzymasz proporcjonalny rozmiar, jeśli tego potrzebujesz. Jeśli potrzebujesz dokładnej wartości piksela urządzenia można zrobić coś takiego, na przykład o szerokości: MediaQuery.of(context).size.width * MediaQuery.of(context).devicePixelRatio. Właśnie napisałem artykuł na ten temat, na wypadek gdyby więcej ludzi szukało
Miha
5

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

Rahul Mahadik
źródło
jeśli używasz tej wtyczki, oznacza to, że możesz zdefiniować tylko 1 szerokość i wysokość, na przykład jeśli używasz iPhone'a 6 (iPhone6 ​​750 * 1334), musisz użyć tych wartości, ale jak to sprawi, że będzie responsywny na wszystkich różnych iPhone'ach ????
GY22
ustawiasz swój projekt podstawowy tylko na podstawie jednego rozmiaru ekranu. Wtyczka dostosowuje się poprawnie do różnych rozmiarów ekranu
Marc
1

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),);
Nikhil Biju
źródło
0

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ść

mewadaarvind
źródło
0

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: ...
 )
iOS Lifee
źródło
0

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

Paresh Mangukiya
źródło
0

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
LittleRider
źródło
5
Chociaż ten kod może rozwiązać problem, w tym wyjaśnienie, jak i dlaczego to rozwiązuje problem, naprawdę pomogłoby poprawić jakość twojego posta i prawdopodobnie zaowocowałoby większą liczbą pozytywnych głosów. Pamiętaj, że odpowiadasz na pytanie do czytelników w przyszłości, a nie tylko osoba, która zapyta teraz. Proszę edytować swoje odpowiedzi, aby dodać wyjaśnień i dać wskazówkę co zastosować ograniczenia i założenia. Z recenzji
podwójny sygnał dźwiękowy