Flatterbildschirmgröße

Ich habe eine neue Anwendung zum Flattern erstellt und beim Umschalten zwischen verschiedenen Geräten Probleme mit der Bildschirmgröße gehabt.

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

Wenn ich das Gerät auf ein neues Gerät umstelle, ist der Container zu lang und gibt einen Fehler aus.

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

Sie können verwenden:

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

So erhalten Sie die Höhe nur von SafeArea (für iOS 11 und höher):

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

Das Erhalten widthist einfach, heightkann aber schwierig sein . Es folgen die folgenden Vorgehensweisenheight

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

Der folgende Code gibt manchmal nicht die richtige Bildschirmgröße zurück:

MediaQuery.of(context).size

Ich habe auf SAMSUNG SM-T580 getestet, das {width: 685.7, height: 1097.1}anstelle der tatsächlichen Auflösung zurückgibt 1920x1080.

Benutzen Sie bitte:

import 'dart:ui';

window.physicalSize;

MediaQuery.of(context).size.widthund MediaQuery.of(context).size.heightfunktioniert gut, aber jedes Mal müssen Ausdrücke wie width / 20 geschrieben werden, um eine bestimmte Höhenbreite festzulegen.

Ich habe eine neue Anwendung zum Flattern erstellt und beim Umschalten zwischen verschiedenen Geräten Probleme mit der Bildschirmgröße gehabt.

Ja, flutter_screenutil Plugin zum Anpassen 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:

//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 in der aktualisierten Dokumentation

Hinweis: Ich habe dieses Plugin getestet und verwendet, das mit allen Geräten, einschließlich iPad, wirklich gut funktioniert

Hoffe das hilft jemandem

Hey, Sie können diese Klasse verwenden, um die Bildschirmbreite und -höhe in Prozent zu ermitteln

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

und so zu verwenden

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

Wie kann ich beim Flattern auf die Bildschirmgröße, Pixeldichte oder das Seitenverhältnis zugreifen?

Mit Hilfe von MediaQuery können wir auf die Bildschirmgröße und andere Faktoren wie Pixeldichte, Seitenverhältnis usw. zugreifen.

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