Créer un design responsive avec MediaQuery

La conception responsive, ou responsive design, est une approche de conception d’interfaces utilisateur qui vise à rendre les applications et les sites web flexibles pour différents types et tailles d’écrans. Cette flexibilité est essentielle pour offrir une expérience utilisateur optimale, quel que soit l’appareil utilisé.

• La classe MediaQuery en Flutter
• LayoutBuilder: Donne les contraintes parentes pour aider à prendre des décisions sur la disposition.
• FractionallySizedBox: Un widget qui taille son enfant à une fraction de l’espace total disponible.
• AspectRatio: Force l’enfant à avoir un ratio d’aspect spécifique.

• Demandez si le téléphone est actuellement en orientation portrait ou paysage.

 final Orientation orientation = MediaQuery.of(context).orientation;

• Désactivez les animations et inversez les couleurs pour des raisons d’accessibilité.
• Demandez au téléphone si l’utilisateur voit son facteur de taille de texte augmenté.

 final Size size = MediaQuery.of(context).size;

• Exemples d’utilisation de MediaQuery

• Ajuster la taille de la police en fonction de la taille de l’écran :
• Vous pouvez augmenter ou diminuer la taille de la police en fonction de la taille de l’écran. Par exemple, vous pouvez rendre la police plus grande sur les tablettes et plus petite sur les téléphones :
Code

 double fontSize = MediaQuery.of(context).size.width > 600 ? 24.0 : 16.0;

Text(
  'Texte adaptable',
  style: TextStyle(fontSize: fontSize),
);

• Afficher ou masquer des éléments en fonction de la taille de l’écran :
• Vous pouvez décider d’afficher ou de masquer certains widgets en fonction de la largeur de l’écran. Par exemple, vous pouvez masquer une barre latérale de navigation sur les petits écrans :
Code

 bool showSidebar = MediaQuery.of(context).size.width > 800;

if (showSidebar) {
  // Afficher la barre latérale de navigation
} else {
  // Ne pas afficher la barre latérale de navigation
}

• Modifier la disposition en fonction de l’orientation de l’écran :
• Vous pouvez également utiliser MediaQuery pour détecter l’orientation de l’écran (portrait ou paysage) et ajuster votre disposition en conséquence :
Code

 final orientation = MediaQuery.of(context).orientation;

if (orientation == Orientation.portrait) {
  // Afficher une disposition adaptée au mode portrait
} else {
  // Afficher une disposition adaptée au mode paysage
}

• Adapter les marges et les espacements :
• Vous pouvez ajuster les marges et les espacements en fonction de la taille de l’écran pour une meilleure apparence visuelle. Par exemple, augmentez les marges sur les grands écrans pour mieux utiliser l’espace disponible :
Code

 double margin = MediaQuery.of(context).size.width > 600 ? 16.0 : 8.0;

Container(
  margin: EdgeInsets.all(margin),
  child: ...,
);

• Exemples d’utilisation de MediaQuery

• Exemple:01

• L’utilisation de mediaQuery.of entraîne automatiquement la reconstruction des widgets en fonction de la taille actuelle des appareils et des préférences de mise en page à chaque fois qu’ils changent.

Résultat souhaité



Solution

 import 'package:flutter/material.dart';
void main() {
  runApp(const MyApp());
}
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Home(title: 'Flutter Demo Home Page'),
      debugShowCheckedModeBanner: false, //supprimer la bannière de debug
    );
  }
}
class Home extends StatelessWidget {
  var size, height, width;
  Home({Key? key, required String title}) : super(key: key);
  @override
  Widget build(BuildContext context) {// obtenir la taille de la fenêtre
    size = MediaQuery.of(context).size;
    height = size.height;
    width = size.width;
    return Scaffold(
      appBar: AppBar(
        title: const Text("Tutoriel MediaQuery"),
        backgroundColor: Colors.blueGrey,
      ),
      body: Container(
        color: Colors.cyan,
        height: height / 2, //La moitié de la taille de la hauteur
        width: width / 2, //La moitié de la taille de la largeur
      ),
    );
  }
}

• Exemple:02

• Supposons que vous souhaitiez avoir une disposition de colonne sur les écrans étroits (comme les téléphones) et une disposition de ligne sur les écrans larges (comme les tablettes). Vous pourriez le faire comme ceci :
Solution

 Widget build(BuildContext context) {
  double width = MediaQuery.of(context).size.width;

  if (width > 600) {
    // Retourner une disposition de ligne pour les écrans larges
    return Row(
      children: [
        WidgetEnfant1(),
        WidgetEnfant2(),
      ],
    );
  } else {
    // Retourner une disposition de colonne pour les écrans étroits
    return Column(
      children: [
        WidgetEnfant1(),
        WidgetEnfant2(),
      ],
    );
  }
}

• Objectif : Créez une page d’accueil réactive avec deux colonnes, une pour les articles et l’autre pour les publicités. La disposition doit s’adapter en fonction de la largeur de l’écran.
• Créez une application Flutter avec une page d’accueil vide.
• Utilisez MediaQuery pour détecter la largeur de l’écran.
• Si la largeur de l’écran est supérieure à 600 pixels, affichez les articles et les publicités dans deux colonnes côte à côte. Sinon, affichez-les en une seule colonne l’un en dessous de l’autre.
• Créez une liste d’exemples d’articles et une liste d’exemples de publicités.
• Affichez les articles et les publicités en utilisant des ListView dans les colonnes correspondantes.
• Assurez-vous que l’interface utilisateur s’adapte de manière transparente lorsque vous redimensionnez l’écran.
Solution
• Créez un nouveau projet Flutter en utilisant la commande flutter create nom_de_votre_projet dans votre terminal.
• Ouvrez le fichier lib/main.dart de votre projet.
• Importez les packages nécessaires en ajoutant les lignes suivantes en haut du fichier :

import 'package:flutter/material.dart';
//Remplacez la classe MyApp par la suivante :
void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}

• Créez une nouvelle classe HomePage en ajoutant le code suivant au-dessus de la classe MyApp :

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final screenWidth = MediaQuery.of(context).size.width;

    if (screenWidth > 600) {
      return Scaffold(
        appBar: AppBar(
          title: Text('Page d\'accueil'),
        ),
        body: Row(
          children: [
            Expanded(
              child: ArticlesColumn(),
            ),
            Expanded(
              child: AdsColumn(),
            ),
          ],
        ),
      );
    } else {
      return Scaffold(
        appBar: AppBar(
          title: Text('Page d\'accueil'),
        ),
        body: Column(
          children: [
            Flexible(
              child: ArticlesColumn(),
            ),
            Flexible(
              child: AdsColumn(),
            ),
          ],
        ),
      );
    }
  }
}

class ArticlesColumn extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final articles = [
      'Article 1',
      'Article 2',
      'Article 3',
    ];

    return ListView.builder(
      itemCount: articles.length,
      itemBuilder: (context, index) {
        return ListTile(
          title: Text(articles[index]),
        );
      },
    );
  }
}

class AdsColumn extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final ads = [
      'Publicité 1',
      'Publicité 2',
      'Publicité 3',
    ];

    return ListView.builder(
      itemCount: ads.length,
      itemBuilder: (context, index) {
        return ListTile(
          title: Text(ads[index]),
        );
      },
    );
  }
}

• Créez deux classes ArticlesColumn et AdsColumn pour afficher les articles et les publicités.
• Voici un exemple de code pour la classe ArticlesColumn, faites de même pour AdsColumn :

class ArticlesColumn extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // Créez une liste d'exemples d'articles
    final articles = [
      'Article 1',
      'Article 2',
      'Article 3',
    ];

    return ListView.builder(
      itemCount: articles.length,
      itemBuilder: (context, index) {
        return ListTile(
          title: Text(articles[index]),
        );
      },
    );
  }
}

• Pour la classe AdsColumn, créez une liste d’exemples de publicités de la même manière que les articles.
• Assurez-vous d’ajouter les widgets ArticlesColumn et AdsColumn à la classe HomePage.
• Exécutez votre application en utilisant la commande flutter run dans votre terminal.

• Objectif : Créez une application de gestion de tâches réactive qui ajuste la disposition en fonction de la taille de l’écran.
• Créez une application Flutter avec une liste de tâches vide.
• Utilisez MediaQuery pour détecter la largeur de l’écran.
• Si la largeur de l’écran est supérieure à 600 pixels, affichez la liste des tâches à gauche et les détails de la tâche sélectionnée à droite. Sinon, affichez la liste des tâches en haut et les détails de la tâche sélectionnée en dessous.
• Créez une classe Task pour représenter une tâche avec des propriétés telles que le nom, la date d’échéance, la priorité, etc.
• Créez une liste d’exemples de tâches.
• Affichez la liste des tâches et les détails de la tâche sélectionnée en utilisant des widgets appropriés.
• Assurez-vous que l’interface utilisateur s’adapte de manière transparente lorsque vous redimensionnez l’écran.