Comment rendre une interface Flutter responsive pour le web

Une approche détaillée et concrète pour créer des interfaces web responsives avec Flutter, en s'appuyant sur les bonnes pratiques et les widgets adaptés.

I. Introduction  

Flutter est connu pour sa capacité à produire des applications multiplateformes à partir d’un seul codebase. Si le framework a d’abord été conçu pour le mobile, ses capacités web se sont considérablement renforcées. Cependant, rendre une interface responsive sur le web avec Flutter nécessite une approche rigoureuse et adaptée aux contraintes de la navigation multi-écrans.

Dans ce guide approfondi, nous allons explorer :

• Les bonnes pratiques fondamentales.
• Les widgets et outils clés à maîtriser.
• Des exemples de code pour chaque approche.
• Les pièges courants et comment les éviter.

II. Comprendre les contraintes du responsive avec Flutter  

Nature déclarative du layout  

Flutter fonctionne différemment du HTML/CSS :

• Il n’existe pas de CSS, chaque comportement est défini par des widgets.
• Il n’y a pas de recalcul automatique du layout : tout est reconstruit à la volée avec le widget tree.

Cela implique que l’adaptation aux écrans ne peut pas être laissée au moteur de rendu, mais doit être pensée manuellement à travers la structure des widgets.

Enjeux spécifiques au web  

• L’utilisateur redimensionne souvent sa fenêtre.
• Les tailles d’écran sont plus imprévisibles que sur mobile.
• Les performances web peuvent être impactées par des rebuilds excessifs ou des layouts complexes.

III. Utiliser MediaQuery et LayoutBuilder efficacement  

MediaQuery : accéder aux dimensions globales  

MediaQuery.of(context).size est la première brique de base pour détecter la largeur et la hauteur de l’écran, mais son usage doit être réservé à l’extérieur des widgets spécifiques.

Widget build(BuildContext context) {
  final width = MediaQuery.of(context).size.width;
  return width < 600 ? buildMobile() : buildDesktop();
}

LayoutBuilder : adaptation contextuelle  

LayoutBuilder fournit les contraintes locales du widget parent.

LayoutBuilder(
  builder: (context, constraints) {
    if (constraints.maxWidth < 800) {
      return buildCompactLayout();
    } else {
      return buildExpandedLayout();
    }
  },
)

✅ À privilégier dans les composants réutilisables ou imbriqués.

OrientationBuilder : gestion de l’orientation  

OrientationBuilder(
  builder: (context, orientation) {
    return orientation == Orientation.portrait ? VerticalLayout() : HorizontalLayout();
  },
)

IV. Approche modulaire avec ResponsiveWidget et système de breakpoints  

Création d’un widget responsive générique  

class ResponsiveWidget extends StatelessWidget {
  final Widget mobile;
  final Widget tablet;
  final Widget desktop;

  const ResponsiveWidget({
    required this.mobile,
    required this.tablet,
    required this.desktop,
  });

  @override
  Widget build(BuildContext context) {
    final width = MediaQuery.of(context).size.width;
    if (width >= 1024) return desktop;
    else if (width >= 600) return tablet;
    else return mobile;
  }
}

Utilisation concrète  

ResponsiveWidget(
  mobile: MobileHomePage(),
  tablet: TabletHomePage(),
  desktop: DesktopHomePage(),
);

Cela permet d’unifier la logique responsive tout en garantissant la lisibilité du code.

🔁 Cette approche est compatible avec Navigator, les routes, et la navigation déclarative.

V. Widgets à connaître pour un layout fluide  

Widgets de base  

• Flexible et Expanded : pour répartir l’espace disponible.
• Wrap : idéal pour les grilles dynamiques ou les tags.
• Spacer : pour créer des marges dynamiques.
• FittedBox : pour forcer l’ajustement d’un widget à son parent.
• AspectRatio : utile pour les vidéos ou les cartes visuelles.
• FractionallySizedBox : ajuste une boîte selon un pourcentage d’un parent.

Widgets pour les grilles  

• GridView.count() : grille à colonnes fixes.
• GridView.builder() : grille dynamique, idéale pour les breakpoints conditionnels.

Exemple dynamique  

GridView.count(
  crossAxisCount: MediaQuery.of(context).size.width > 800 ? 4 : 2,
  crossAxisSpacing: 10,
  mainAxisSpacing: 10,
  children: cards,
)

VI. Gérer les textes et les images  

Texte responsive  

• Utiliser FittedBox, AutoSizeText, ou MediaQuery.textScaleFactorOf(context).
• Prévoir des tailles minimales pour la lisibilité (ex. 14px sur mobile).

Images adaptatives  

• Éviter les tailles fixes.
• Utiliser BoxFit.cover ou BoxFit.contain avec Image.asset().
• Utiliser Image.network() avec width: double.infinity pour les bannières.

VII. Stratégies avancées : responsive state et navigation  

Gérer la logique via Provider / Riverpod  

Vous pouvez stocker le LayoutType (mobile, tablet, desktop) dans un Provider pour l’utiliser dans toute l’application.

Navigation conditionnelle  

if (isDesktop) {
  Navigator.push(context, MaterialPageRoute(builder: (_) => DesktopView()));
} else {
  Navigator.push(context, MaterialPageRoute(builder: (_) => MobileView()));
}

VIII. 🔗 Ressources utiles  

• Flutter documentation - Responsive design
• Flutter Layout Explorer
• Flutter Widget of the Week: LayoutBuilder
• auto_size_text package
• flutter_screenutil package

IX. Conclusion  

Créer une interface responsive en Flutter pour le web demande d’abandonner certaines habitudes héritées du CSS et de bien exploiter la puissance des widgets Flutter. Grâce à des composants comme LayoutBuilder, MediaQuery, ou des approches modulaires comme ResponsiveWidget, il est tout à fait possible de produire des interfaces fluides, professionnelles et adaptées à toutes les résolutions.

En gardant à l’esprit l’importance de la lisibilité, de la flexibilité des layouts et de la performance, Flutter permet de construire des expériences utilisateur cohérentes, modernes, et maintenables.