Comment rendre l'application Flutter réactive en fonction de la taille de l'écran ?

Question

Je rencontre des difficultés pour le rendre réactif en fonction des différentes tailles d'écran. Comment le rendre réactif ?

@override
       Widget build(BuildContext context) {
       return new Container(
       decoration: new BoxDecoration(color: Colors.white),
       child: new Stack(
        children: [
          new Padding(
            padding: const EdgeInsets.only(bottom: 350.0),
            child: new GradientAppBar(" "),
          ),
          new Positioned(
            bottom: 150.0,
            height: 260.0,
            left: 10.0,
            right: 10.0,
            child: new Padding(
              padding: new EdgeInsets.all(10.0),
              child: new Card(
                child: new Column(
                  mainAxisSize: MainAxisSize.min,
                  children: <Widget>[
                    const ListTile(
                      title: const Text(
                        'LOGIN',
                        textAlign: TextAlign.center,
                        style: const TextStyle(
                          fontSize: 16.50,
                          fontFamily: "Helvetica",
                          fontWeight: FontWeight.bold,
                          color: Colors.black87,
                          letterSpacing: 1.00,
                        ),
                      ),
                    ),
                    new ListTile(
                      leading: const Icon(Icons.person),
                      title: new TextField(
                        controller: _user1,
                        decoration: new InputDecoration(
                            labelText: '     Enter a username'),
                      ),
                    ),
                    new ListTile(
                      leading: const Icon(Icons.person_pin),
                      title: new TextField(
                        controller: _pass1,
                        decoration: new InputDecoration(
                            labelText: '     Enter a password'),
                        obscureText: true,
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ),
          new Positioned(
            bottom: 70.0,
            left: 15.0,
            right: 05.0,
            child: new ButtonTheme.bar(
            // make buttons use the appropriate styles for cards
              child: new ButtonBar(
                children: <Widget>[
                  new FlatButton(
                    padding: new EdgeInsets.only(right: 13.0),
                    child: new Text(
                      'REGISTER HERE',
                      style: new TextStyle(
                          color: Colors.black87,
                          fontFamily: "Helvetica",
                          fontSize: 15.00,
                          fontWeight: FontWeight.bold),
                    ),
                    onPressed: () {
                      Navigator.of(context).pushNamed('/facebook');
                    },
                  ),
                  new FlatButton(
                    padding: new EdgeInsets.only(right: 22.0),
                    child: new Text(
                      'FORGOT PASSWORD?',
                      style: new TextStyle(
                          color: Colors.black87,
                          fontFamily: "Helvetica",
                          fontSize: 15.00,
                          fontWeight: FontWeight.bold),
                    ),
                    onPressed: () {
                      Navigator.of(context).pushNamed('/Forgot');
                    },
                  ),
                ],
              ),
            ),
          ),
          new Positioned(
            bottom: 73.0,
            height: 180.0,
            left: 20.0,
            right: 52.0,
            child: new Padding(
              padding: new EdgeInsets.all(0.00),
              child: new ButtonTheme(
                minWidth: 10.0,
                height: 20.0,
                padding: new EdgeInsets.only(right: 37.0),
                child: new ButtonBar(children: <Widget>[
                  new CupertinoButton(
                      borderRadius:
                          const BorderRadius.all(const Radius.circular(36.0)),
                      padding: new EdgeInsets.only(left: 70.0),
                      color: const Color(0xFF426DB7),
                      child: new Text(
                        "     LOGIN                            ",
                        style: new TextStyle(
                            color: Colors.white,
                            fontSize: 12.50,
                            fontFamily: "Handwriting",
                            fontWeight: FontWeight.w500,
                            letterSpacing: 0.00),
                      ),
                      onPressed: () {})
                ]),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Answer 1

Utilisation de MediaQuery classe :

MediaQueryData queryData;
queryData = MediaQuery.of(context);

MediaQuery : Établit un sous-arbre dans lequel les requêtes média sont résolues. vers les données données.

MediaQueryData : Information sur un élément de média (par exemple, une fenêtre).

Pour obtenir le ratio de pixels de l'appareil :

queryData.devicePixelRatio

Pour obtenir la largeur et la hauteur de l'écran de l'appareil :

queryData.size.width
queryData.size.height

Pour obtenir le facteur d'échelle du texte :

queryData.textScaleFactor

Utilisation de AspectRatio classe :

Du doc :

Un widget qui tente d'adapter la taille de l'enfant à un rapport d'aspect spécifique.

Le widget essaie d'abord de trouver la plus grande largeur autorisée par les contraintes contraintes. La hauteur du widget est déterminée par l'application de la valeur rapport d'aspect donné à la largeur, exprimé sous la forme d'un rapport entre la largeur et la hauteur.

Par exemple, un rapport largeur/hauteur de 16:9 aura une valeur de 16.0/9.0. Si la largeur maximale est infinie, la largeur initiale est déterminée en appliquant le rapport d'aspect à la hauteur maximale.

Prenons maintenant un deuxième exemple, cette fois avec un rapport d'aspect de 2.0. et des contraintes de mise en page exigeant que la largeur soit comprise entre 0,0 et 100,0 et la hauteur entre 0,0 et 100,0. 100,0 et la hauteur entre 0,0 et 100,0. Nous choisirons une largeur de 100,0 (la plus grande autorisée) et une hauteur de 50,0 (pour correspondre au ratio d'aspect). rapport hauteur/largeur).

//example
new Center(
 child: new AspectRatio(
  aspectRatio: 100 / 100,
  child: new Container(
    decoration: new BoxDecoration(
      shape: BoxShape.rectangle,
      color: Colors.orange,
      )
    ),
  ),
),

Vous pouvez également utiliser :

• LayoutBuilder
• FittedBox
• CustomMultiChildLayout

Answer 2

Cette classe va aider et ensuite initialiser la classe avec la méthode init.

import 'package:flutter/widgets.dart';

class SizeConfig {
  static MediaQueryData _mediaQueryData;
  static double screenWidth;
  static double screenHeight;
  static double blockSizeHorizontal;
  static double blockSizeVertical;
  static double _safeAreaHorizontal;
  static double _safeAreaVertical;
  static double safeBlockHorizontal;
  static double safeBlockVertical;

  void init(BuildContext context){
    _mediaQueryData = MediaQuery.of(context);
    screenWidth = _mediaQueryData.size.width;
    screenHeight = _mediaQueryData.size.height;
    blockSizeHorizontal = screenWidth/100;
    blockSizeVertical = screenHeight/100;
    _safeAreaHorizontal = _mediaQueryData.padding.left +
        _mediaQueryData.padding.right;
    _safeAreaVertical = _mediaQueryData.padding.top +
        _mediaQueryData.padding.bottom;
    safeBlockHorizontal = (screenWidth - _safeAreaHorizontal)/100;
    safeBlockVertical = (screenHeight - _safeAreaVertical)/100;
  }
}

puis, dans votre dimension "widgets", faites ceci

Widget build(BuildContext context) {
    SizeConfig().init(context);
    return Container(
    height: SizeConfig.safeBlockVertical * 10, //10 for example
    width: SizeConfig.safeBlockHorizontal * 10, //10 for example
    );}

Tous les crédits à l'auteur de ce post : https://medium.com/flutter-community/flutter-effectively-scale-ui-according-to-different-screen-sizes-2cb7c115ea0a

Answer 3

Ce que je fais, c'est de prendre la largeur et la hauteur de l'écran et d'en calculer une grille de 100*100 pour positionner et mettre à l'échelle les choses, puis de la sauvegarder en tant que variables statiques pouvant être réutilisées. Cela fonctionne très bien dans la plupart des cas. Comme ceci :

AppConfig.width = MediaQuery.of(context).size.width;
AppConfig.height = MediaQuery.of(context).size.height;
AppConfig.blockSize = AppConfig.width / 100;
AppConfig.blockSizeVertical = AppConfig.height / 100;

Puis je mets tout à l'échelle en fonction de ces valeurs, comme ceci :

double elementWidth = AppConfig.blockSize * 10.0;   // 10% of the screen width

ou

double fontSize = AppConfig.blockSize * 1.2;

Parfois, la zone de sécurité (encoche, etc.) tue une disposition, vous pouvez donc en tenir compte également :

AppConfig.safeAreaHorizontal = MediaQuery.of(context).padding.left +
    MediaQuery.of(context).padding.right;

double screenWidthWithoutSafeArea = AppConfig.width - AppConfig.safeAreaHorizontal;

Cela a bien fonctionné sur certains projets récents.

Answer 4

Vérifiez MediaQuery classe

Par exemple, pour connaître la taille du média actuel (par exemple, la fenêtre contenant votre application), vous pouvez lire le fichier MediaQueryData.size à partir de la MediaQueryData retourné par MediaQuery.of : MediaQuery.of(context).size .

Vous pouvez donc faire ce qui suit :

 new Container(
                      height: MediaQuery.of(context).size.height/2,
..            )

Answer 5

Place dependency in pubspec.yaml

flutter_responsive_screen: ^1.0.0

Function hp = Screen(MediaQuery.of(context).size).hp;
Function wp = Screen(MediaQuery.of(context).size).wp;

Example :
return Container(height: hp(27),weight: wp(27));