Comment rendre une app Flutter responsive en fonction de la taille d'écran ?

Flutter est un framework permettant de créer un front-end fonctionnant sur de nombreuses plateformes. Cela a commencé par les systèmes d'exploitation mobile les plus populaires, Android et iOS. Aujourd'hui, le but est d'élargir encore le framework pour que votre application fonctionne avec un navigateur et également sur les systèmes d'exploitation pour ordinateurs de bureau. Pour réaliser ceci, le framework doit pouvoir vous permettre d'adapter votre application à toutes les tailles d'écran, de l'écran d'un smartphone à celui d'un ordinateur. Plusieurs classes et méthodes vous permettent de le faire.

La classe MediaQuery va vous être très utile pour adapter le contenu de vos widgets à la taille de l'écran. Elle vous permet de récupérer un objet contenant différentes informations sur le périphérique en train d'exécuter l'application. L'attribut "devicePixelRatio" donne le ratio hauteur/largeur. Les informations sur la largeur et la hauteur de l'écran sont stockées dans l'attribut "size", avec respectivement les propriétés "width" et "height". L'attribut "textScaleFractor" contient quant à lui le ratio d'agrandissement des textes. Cet attribut va vous permettre de rendre plus accessible votre application aux personnes ayant des problèmes de vue et ayant augmenté la taille de la police sur leur appareil.

//Récupération de l'objet
MediaQueryData queryData;
queryData = MediaQuery.of(context);
//Ratio
ratio = queryData.devicePixelRatio;
//Taille de l'écran
largeur = queryData.size.width;
hauteur = queryData.size.height;
//Agrandissement du texte
grossissement = queryData.textScaleFactor;

Le framework Flutter fournit également plusieurs classes de widgets qui adaptent leur largeur à la taille du container. Ces widgets permettent de rendre ainsi votre application responsive. La classe "AspectRatio" est un type de widget qui se sert d'un ratio en pourcentage pour adapter sa largeur et sa hauteur à l'écran. Il existe également d'autres classes. La classe "LayoutBuilder" fournit un arbre de widgets dont la taille peut être adaptée en fonction du widget qui le contient. Les classes "FittedBox" et "CustomMultiChildLayout" sont également des classes qui proposent des solutions pour adapter les largeurs. Nous vous conseillons de lire la documentation du framework qui est très complète pour utiliser ces widgets.

// Exemple d'utilisation du widget "AspectRatio"
new Center(
 child: new AspectRatio(
  aspectRatio: 100 / 100,
  child: new Container(
    decoration: new BoxDecoration(
      shape: BoxShape.rectangle,
      color: Colors.orange,
      )
    ),
  ),
),