Comment gérer le responsive en Flutter

Introduction

Dans cet article nous allons explorer des solutions permettant de mieux gérer le responsive, c’est à dire un affichage réactif qui s’adapte aux différentes tailles d’écran, lors du développement d’une application en Flutter. En effet, l’avantage principal du Framework Flutter est qu’il permet de générer, avec une seule et meme base de code, une application compatible avec de nombreux terminaux. Néanmoins un obstacle à cela est de rendre l’application responsive sur chacun de ces terminaux.

En effet, les tailles d’écran varient énormément d’un iPhone mini à un iPad Pro en passant par un Galaxy Note.

Nous allons, dans cet article, détailler deux outils qui facilitent le développement d’application en Flutter et que je souhaiterais vous partager.

Le premier outil que nous allons découvrir ensemble est ScreenUtils, il permet de conserver le rapport entre la taille de l’écran sur lesquels sont basé les maquettes et la taille des widgets UI définit dans le code, ce qui rends l’intégration des maquettes UI responsive avec peu d’effort.

Le second outil, le package DevicePreview, permet de vérifier facilement le rendu sur différentes tailles d’écran.

Présentation de ScreenUtils

Flutter ScreenUtils est un package qui va vous permettre de faire correspondre le design UI de vos maquettes avec votre application tout en conservant le rapport de ce design pour chaque taille d’écran. Ce package est disponible sur ScreenUtils.

Tout d’abord, nous allons installer le package ScreenUtils, dans notre application Flutter via la commande :

flutter pub add flutter_screenutil

Une fois, le package installé nous allons l’importer dans notre main.dart comme ceci :

import 'package:flutter_screenutil/flutter_screenutil.dart';

Afin de pouvoir initialiser le package.L’initialisation du package consiste, en réalité, à donner au widget ScreenUtilInit les dimensions des écrans des maquettes. Lors de l’initialisation, d’autres paramètres peuvent être passés en argument.

Nous placerons le screenUtilInit au dessus du widget MaterialApp afin que les tailles des widgets puissent être calculées avant l’initialisation de l’app.

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  const widthMockUp = 360;
  const heightMockUp = 690;

  @override
  Widget build(BuildContext context) {
    //Set the fit size (Find your UI design, look at the dimensions of the device screen and fill it in,unit in dp)
    return ScreenUtilInit(
      designSize: const Size(widthMockUp, heightMockUp),
      minTextAdapt: true,
      splitScreenMode: true,
      builder: (context , child) {
        return MaterialApp(
          debugShowCheckedModeBanner: false,
          title: 'First Method',
          // You can use the library anywhere in the app even in theme
          theme: ThemeData(
            primarySwatch: Colors.blue,
            textTheme: Typography.englishLike2018.apply(fontSizeFactor: 1.sp),
          ),
          home: child,
        );
      },
      child: const HomePage(title: 'First Method'),
    );
  }
}

Ensuite l’utilisation du package est tres simple, à chaque widget que vous souhaitez dimensionner il vous suffit de reporter la taille de votre maquette et y ajouter un petit suffixe tel que .w si vous souhaitez que la taille de ce dernier soit adaptée en fonction de la largeur du terminal, ou un .h si vous souhaitez qu’il le soit en fonction de la hauteur. Enfin une dernière possibilité s’offre à vous. c’est le .r qui correspond au minimum entre la hauteur et la largeur. Voici quelques exemples :

//If you want to display a rectangle:
Container(
  width: 375.w,
  height: 375.h,
),
            
//If you want to display a square based on the width:
Container(
  width: 300.w,
  height: 300.w,
),

//If you want to display a square based on the height:
Container(
  width: 300.h,
  height: 300.h,
),

//If you want to display a square based on the minimum between height and width
Container(
  width: 300.r,
  height: 300.r,
),

L’utilisation de ce package est selon moi un vrai gain de temps dans les projets, car il rend une maquette fixe, responsive, en conservant ses proportions, au travers des différentes tailles d’écran.

Présentation de DevicePreview

Nous allons maintenant voir comment vérifier que notre app est réellement responsive avec un rendu en temps réel. Pour cela, nous allons utiliser le package DevicePreview, il permet de faciliter la vie des développeurs en montrant le rendu pour tout ces terminaux. De plus, il est possible de changer l’orientation ou encore de configurer ces terminaux avec le dark mode par exemple, la taille du texte ou encore le language afin de s’assurer que tout les visuels sont conformes aux maquettes.

⚠️ Votre application Flutter doit être compatible Web afin de profiter au mieux de ce package. Si ce n’est pas le cas, je vous propose ce tutoriel de Pinkesh Darji.

Tout d’abord, comme pour le package précédent, nous allons installer le package via la commande suivant :

flutter pub add device_preview

Maintenant que le package est installé, nous allons pouvoir l’initialiser, il suffit de faire appel au widget DevicePreview comme ceci :

import 'package:device_preview/device_preview.dart';
import 'package:flutter/foundation.dart';

void main() => runApp(
  DevicePreview(
    enabled: !kReleaseMode,
    builder: (context) => MyApp(), // Wrap your app
  ),
);

L’argument enabled, permet ici de désactiver le package lorsque nous compilons en mode production.

Afin que toutes les options du packages fonctionnent il est demandé de configurer quelques arguments de la MaterialApp avec des paramètres de la bibliothèque, afin de pouvoir les modifier depuis la WebView. Ainsi, il faut s’assurer que les valeurs des paramètres : useInheritedMediaQuery, locale et builder soient les suivantes :

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      useInheritedMediaQuery: true,
      locale: DevicePreview.locale(context),
      builder: DevicePreview.appBuilder,
      theme: ThemeData.light(),
      darkTheme: ThemeData.dark(),
      home: const HomePage(),
    );
  }
}

Vous trouverez tout les liens pour plus d’options concernant ce package sur le site GitHub de Alois.

Ensuite pour lancer l’émulation, il vous suffira de sélectionner Chrome et de build l’application en web.

Vous pouvez maintenant modifier le terminal à votre guise afin de vérifier que tout les visuels sont semblable aux maquettes.

Bon dev à toutes et tous !