Responsive widgets – Flutter Tips of the month #3

Par
Mobilité 31 mars 2020
Temps de lecture : 3 mn

L’arrivée de nouvelles plateformes (Web, Desktop …) va nous contraindre à apporter quelques modifications dans nos applications afin de supporter les différents formats d’écrans.

Dans cet article, moins de code que dans les deux précédents, je vais donc vous présenter mon top 5 des widgets incontournables afin de développer une interface responsive.

1. MediaQuery

Ce widget est un InheritedWidget ayant pour but de retourner un objet MediaQueryData contenant de nombreuses propriétés notamment :

Pour récupérer une instance de MediaQueryData il faut utiliser la méthode : MediaQuery.of(context).

Il est important de savoir !

L’utilisation de cette méthode dans un widget effectue un enregistrement de celui-ci grâce au contexte. Dès que MediaQuery retournera une nouvelle instance de MediaQueryData alors chaque widget ayant appelé la méthode MediaQuery.of(context) sera reconstruit.

Cette reconstruction automatique est due à la méthode : context.dependOnInheritedWidgetOfExactType<MediaQuery>.

C’est grâce à ce procédé que vous avez des reconstructions automatique par le contexte dans certaines librairies, je pense notamment à la librairie Provider qui permet de faire de l’injection de dépendance et du State Management. Enfin pour être plus précis c’est la méthode context.dependOnInheritedElement , qui utilisée en interne dans Provider, qui est presque en tout point similaire à context.dependOnInheritedWidgetOfExactType.



https://dartpad.dev/embed-flutter.html?id=93e9307b370ca1e77e3178e23b03af6d

Documentation: https://api.flutter.dev/flutter/widgets/MediaQuery-class.html

2. OrientationBuilder

OrientationBuilder utilise LayoutBuilder que j’expliquerai un peu plus bas dans cet article.

Ce widget notifie l’orientation courante mais aussi chaque changement d’orientation afin de reconstruire un nouveau widget enfant. Ceci est très utile pour conceptualiser votre interface et adapter au mieux le contenu.

Par exemple, si votre écran contient une GridView et que vous souhaitez changer le nombre de colonnes selon l’orientation, il suffit d’appliquer le code suivant :

OrientationBuilder(
  builder: (context, orientation) {
    return GridView.count(
      crossAxisCount: orientation == Orientation.portrait ? 2 : 3,
    );
  },
);


https://dartpad.dev/embed-flutter.html?id=ba96a8efe983579e90d2dd99e6a73a93

Documentation: https://api.flutter.dev/flutter/widgets/OrientationBuilder-class.html

3. LayoutBuilder

Ce widget se comporte exactement comme le widget Builder, c’est à dire qu’il va vous permettre de construire un widget enfant sauf qu’il permet de récupérer les contraintes du widget parent :

Imaginons un monde où le widget AspectRatio n’existe pas, dans ce cas le code suivant suffirait à obtenir un widget au format 4/3 : 

LayoutBuilder(
  builder: (BuildContext context, BoxConstraints constraints) {
    return Container(
      width: constraints.biggest.width, // largeur du widget parent
      height: constraints.biggest.width / (4/3), // largeur du widget parent divisé par un 4/3
      color: Colors.red,
    );
  },
)


https://dartpad.dev/embed-flutter.html?id=f67c35c36e8a489e7d921e899fabb221

C’est bien sûr un des exemples possibles, pour le reste je fais confiance à votre imagination 💙.

Documentation: https://api.flutter.dev/flutter/widgets/LayoutBuilder-class.html

4. AspectRatio

Il fait également parti des indispensables ! Comme son nom l’indique, ce widget permet de redimensionner un enfant par rapport à un ratio. L’implémentation est simple, pour reprendre l’exemple précédent voici l’adaptation avec AspectRatio : 

AspectRatio(
  aspectRatio: 4/3,
  child: Container(
    color: Colors.red,
  ),
)


https://dartpad.dev/embed-flutter.html?id=5d93d264c680fc3f307b814de5e9a0b2

Documentation: https://api.flutter.dev/flutter/widgets/AspectRatio-class.html

5. FractionallySizedBox

Ce widget peut être intéressant : placé dans une Stack, il permet de gérer des contenus proportionnels à la taille du widget parent. Il prend deux propriétés clés :

  • widthFactor pour le ratio par rapport à la largeur du parent
  • heightFactor pour le ratio par rapport à la hauteur du parent

Imaginons que vous devez intégrer un bouton qui doit prendre 50% de la largeur du parent, alors le code à intégrer serait le suivant : 

FractionallySizedBox(
  widthFactor: 0.5,
  child: RaisedButton(
    onPressed: () {},
    color: Colors.red,
    child: Text('BUTTON'),
  ),
)


https://dartpad.dev/embed-flutter.html?id=23482bf8e0bb4d30aecedd51c46a212e

Documentation: https://api.flutter.dev/flutter/widgets/FractionallySizedBox-class.html

Conclusion

Nous venons de voir mon top 5, mais il existe bien d’autres widgets permettant des traitements plus complexes que nous aborderons dans de futurs articles 😋 :

Série Flutter of the month
Retour

Vous pouvez aussi aimer

5

Personnaliser la shape d’une BottomSheet – Flutter Tips of the month #1

Par
Divers, Mobilité 31 janvier 2020
Temps de lecture : 5 mn
5

Hero – le super widget – Flutter Tips of the month #2

Par
Mobilité 25 février 2020
Temps de lecture : 5 mn
Show CommentsClose Comments