Taille de l'écran flottant

Question

J'ai créé une nouvelle application sur des ailes, et j'ai eu des problèmes avec les tailles d'écran lors de la commutation entre les différents dispositifs.

J'ai créé l'application en utilisant le Pixel 2XL taille de l'écran, et parce que j'ai eu les contenants avec un enfant de ListView il m'a demandé d'inclure une hauteur et la largeur du conteneur.

Alors, quand je passe l'appareil à un nouvel appareil, le conteneur est trop long et renvoie une erreur.

Comment puis-je procéder pour faire en sorte que l'application est optimisée pour tous les écrans?

Answer 1

Vous pouvez utiliser:

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

Answer 2

Obtenir width est facile mais height peut être difficile , voici les moyens de gérer 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;
 

Answer 3

Le code ci-dessous ne renvoie pas parfois la taille d'écran correcte:

 MediaQuery.of(context).size
 

J'ai testé sur SAMSUNG SM-T580, qui renvoie {width: 685.7, height: 1097.1} au lieu de la résolution réelle 1920x1080 .

Veuillez utiliser:

 import 'dart:ui';

window.physicalSize;
 

Answer 4

MediaQuery.of(context).size.width et MediaQuery.of(context).size.height fonctionne très bien, mais à chaque fois que le besoin d'écrire des expressions comme largeur/20 pour définir la hauteur de la largeur.

J'ai créé une nouvelle application sur des ailes, et j'ai eu des problèmes avec les tailles d'écran lors de la commutation entre les différents dispositifs.

Oui, flutter_screenutil plugin disponible pour l'adaptation de l'écran et la taille de la police. Laissez votre INTERFACE utilisateur d'afficher une disposition raisonnable sur différentes tailles d'écran!

Utilisation:

Ajouter la dépendance：

Veuillez vérifier la version la plus récente avant l'installation.

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

Ajouter les importations suivantes à votre Dart code:

import 'package:flutter_screenutil/flutter_screenutil.dart';

Initialiser et de régler l'ajustement de la taille et de la taille de la police à l'échelle selon le système de la "taille de police" option d'accessibilité

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

Utilisation：

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

Veuillez consulter la mise à jour de la documentation pour plus de détails

Note: j'ai testé et en utilisant ce plugin, qui fonctionne très bien avec tous les appareils, y compris iPad

Espérons que cela aide quelqu'un