web-dev-qa-db-fra.com

Taille de l'écran Flutter

J'ai créé une nouvelle application sur Flutter et j'ai eu des problèmes avec la taille de l'écran lors du basculement entre différents appareils.

J'ai créé l'application en utilisant la taille d'écran Pixel 2XL, et comme j'ai des conteneurs avec enfant de ListView, il m'a été demandé d'inclure une hauteur et une largeur pour le conteneur.

Ainsi, lorsque je commute le périphérique sur un nouveau périphérique, le conteneur est trop long et génère une erreur.

Comment puis-je faire pour que l'application soit optimisée pour tous les écrans?

dartscreenflutterscreen-size
4
Tom O'Sullivan

MediaQuery.of(context).size.width et MediaQuery.of(context).size.height fonctionne très bien, mais chaque fois vous devez écrire des expressions telles que width/20 pour définir une hauteur spécifique.

J'ai créé une nouvelle application sur Flutter et j'ai eu des problèmes avec la taille de l'écran lors du basculement entre différents appareils.

Oui, flutter_screenutilplugin disponible pour adapter la taille de la police et de l'écran. Laissez votre interface utilisateur afficher une disposition raisonnable sur différentes tailles d'écran!

Utilisation:

Ajouter une dépendance:

Veuillez vérifier la dernière version avant l'installation.

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

Ajoutez les importations suivantes à votre code Dart: 

import 'package:flutter_screenutil/flutter_screenutil.Dart';

Initialiser et définir la taille d'ajustement et la taille de police à l'échelle en fonction de l'option d'accessibilité du système "Taille de police"

//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 vous référer à la documentation mise à jour pour plus de détails.

Note: J'ai testé et utilisé ce plugin, qui fonctionne vraiment bien avec tous les appareils, y compris l'iPad

J'espère que cela aidera quelqu'un

0
Rahul Mahadik