it-swarm.com.de

Flatterbildschirmgröße

Ich habe eine neue Anwendung für Flattern erstellt und hatte Probleme mit der Bildschirmgröße, wenn zwischen verschiedenen Geräten gewechselt wurde.

Ich habe die Anwendung mit der Pixel-2XL-Bildschirmgröße erstellt. Da ich Container mit untergeordneten Elementen von ListView hatte, wurde ich gebeten, eine Höhe und Breite für den Container anzugeben.

Wenn ich also das Gerät auf ein neues Gerät umstelle, ist der Container zu lang und es wird ein Fehler ausgegeben.

Wie kann ich damit umgehen, damit die Anwendung für alle Bildschirme optimiert wird?

4
Tom O'Sullivan

Sie können verwenden:

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

Es ist einfach, width zu bekommen, aber height kann schwierig sein. Es folgen die Methoden, mit height umzugehen.

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

MediaQuery.of(context).size.width und MediaQuery.of(context).size.height funktionieren hervorragend, müssen jedoch jedes Mal Ausdrücke wie width/20 schreiben, um eine bestimmte Höhe und Breite festzulegen.

Ich habe beim Flattern eine neue Anwendung erstellt und Probleme mit den Bildschirmgrößen beim Umschalten zwischen verschiedenen Geräten.

Ja, flutter_screenutilPlugin zur Anpassung von Bildschirm und Schriftgröße verfügbar. Lassen Sie Ihre Benutzeroberfläche ein angemessenes Layout auf verschiedenen Bildschirmgrößen anzeigen!

Verwendung:

Abhängigkeit hinzufügen :

Bitte überprüfen Sie vor der Installation die neueste Version.

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

Fügen Sie Ihrem Dart-Code die folgenden Importe hinzu:

import 'package:flutter_screenutil/flutter_screenutil.Dart';

Initialisieren Sie die Anpassungsgröße und die Schriftgröße und stellen Sie sie so ein, dass sie gemäß der Eingabehilfenoption "Schriftgröße" des Systems skaliert werden.

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

Verwenden Sie :

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

Weitere Informationen finden Sie unter updated documentation

Hinweis: Ich habe dieses Plugin getestet und benutze es. Es funktioniert wirklich gut mit allen Geräten, einschließlich iPad

Hoffe das hilft jemandem

1
Rahul Mahadik