Le widget MaterialApp de Flutter

Objectifs

Comprendre le rôle du widget MaterialApp dans Flutter.
Découvrir la relation entre Material Design et Flutter.
Apprendre à configurer les propriétés principales de MaterialApp.
Savoir créer une première interface en utilisant MaterialApp et Scaffold.
Différencier MaterialApp et Scaffold.
Mettre en pratique les connaissances en développant une petite application Flutter.

Qu’est-ce que MaterialApp Widget ?

Avant d’entrer dans MaterialApp , comprenons ce qu’est le « Material Design« .

En 2014, Google a introduit Material Design
- Le « Material Design » est un « langage de conception » développé par Google. Cette nouvelle méthodologie de conception a été créée en 2014 et est aujourd’hui l’une des plus grandes tendances du design .
- Pensé pour être fluide, naturel, intuitif et simple à comprendre, Material Design a plusieurs particularités et fondements, et vise à synthétiser les concepts classiques d’un bon design avec l’innovation et les possibilités apportées par la technologie et la science.
- Il offre une expérience transparente sur de nombreuses plates-formes différentes, qu’il s’agisse de smartphones, d’ordinateurs ou de montres intelligentes.
- Material Design est un langage de conception développé par Google. Ce nouveau concept de conception a été créée en 2014 et est aujourd’hui l’une des plus grandes tendances du design.Il est fluide, naturel, intuitif et simple à comprendre,Material Design possède plusieurs caractéristiques et principes fondamentaux. Son objectif est de synthétiser les concepts classiques d’un bon design avec l’innovation et les possibilités apportées par la technologie
En 2021, Google a introduit Material You, une évolution du Material Design centrée sur :

Personnalisation : L’utilisateur peut adapter les couleurs et les formes.
Design dynamique : Les interfaces s’adaptent au contexte (ex: heure de la journée).
Émotion : Des couleurs plus organiques et des animations plus expressives.

MaterialApp est l’un des widgets les plus puissants de Futter. si vous créez une application Flutter de base, le premier widget que vous verrez est MaterialApp
Le Widget MaterialApp est une classe prédéfinie dans un flutter. C’est probablement le composant principal ou central du flutter qui permet l’accès à tous les autres composants et widgets fournis par Flutter SDK.

MaterialApp est un widget pratique qui intègre divers widgets généralement nécessaires aux applications de conception de matériaux .
Le widget Texte, le widget Bouton déroulant , le widget AppBar , le widget Scaffold , le widget ListView, le widget StatelessWidget ,le widget IconButton , le widget TextField , le widget Padding , le widget ThemeData , etc. sont les widgets accessibles à l’aide de la classe MaterialApp .

MaterialApp est un widget qui encapsule plusieurs widgets nécessaires pour la conception d’applications material design.
En fait, le mot material ou matériel, veut dire qu’il s’inspire d’objets réels.
Le widget MaterialApp est une classe Flutter qui fournit une disposition de conception material design. En fait, c’est un composant principal pour d’autres widgets enfants et on l’utilise généralement comme widget de niveau supérieur.
Le widget MaterialApp est une classe Flutter qui fournit une disposition de conception material design. Il est le widget racine qui applique Material Design à votre application Flutter. En fait, c’est un composant principal pour d’autres widgets enfants et on l’utilise généralement comme widget de niveau supérieur.De plus, on peut utiliser MaterialApp dans de nombreuses plates-formes différentes, qu’il s’agisse de smartphones, d’ordinateurs ou de montres intelligentes.
Toutefois, pour l’utiliser, nous devons créer une nouvelle instance dans la méthode runnApp qui est le root ou la racine de notre application.

Exemple

import 'package:flutter/material.dart'; void main(){ runApp( MaterialApp( ) );}

Nous allons créer une page d’accueil et lui donner une couleur.

import 'package:flutter/material.dart'; void main() { runApp(const MaterialApp( title: "Le nom de l'application", home: Material(color: Colors.amber))); }

home : Il est utilisé, dans l’exemple, pour la route par défaut de l’application, c’est-à-dire que le widget qui y est défini s’affiche lorsque l’application démarre normalement.

En enveloppant votre application dans MaterialApp , vous indiquez à votre application d’utiliser Material Design d’Android , qui est un système de conception créé par Google pour aider les équipes à créer des expériences numériques de haute qualité pour Android, iOS, Flutter et le Web.

Propriétés principales de MaterialApp

title :
Titre de l’application, utilisé par le système d’exploitation (ex : affiché dans le
gestionnaire de tâches Android ou dans les onglets d’applications sur certaines plateformes).

Exemple

MaterialApp(
  title: 'Ma Super Application',
  home: MyHomePage(),
)

debugShowCheckedModeBanner :
Contrôle l’affichage du bandeau DEBUG (en haut à droite).
Par défaut = true, mais on le désactive avec false pour un rendu plus propre en développement.

Exemple

MaterialApp(
  debugShowCheckedModeBanner: false,
  home: MyHomePage(),
)

theme :
Définit le thème global de l’application (couleurs, polices, styles, formes des boutons, etc.).
On utilise la classe ThemeData pour configurer ces paramètres.

Exemple

MaterialApp(
      // 🔹 Thème global
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.red),
         // ColorScheme.fromSeed crée un ColorScheme (ensemble complet de couleurs : primaire, secondaire, arrière-plan, erreurs, etc.).
        //Si tu changes Colors.red par Colors.green, toute l’application changera automatiquement de style de manière cohérent
        useMaterial3: true, // si tu veux Material Design 3
        textTheme: TextTheme(
          bodyMedium: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
         // Pour la propriété fontWeight, je prends la valeur bold définie dans la classe FontWeight.
         // propriété → classe → valeur
        ),
      ),
  ),
  home: MyHomePage(),
)

home :
Définit le widget principal (page d’accueil) qui s’affiche au lancement de l’application
si aucune route initiale (initialRoute) n’est spécifiée.

Exemple

MaterialApp(
  home: Scaffold(
    appBar: AppBar(title: Text("Accueil")),
    body: Center(child: Text("Bienvenue !")),
  ),
)

color :
Définit la couleur principale

Exemple

MaterialApp(
  color: Colors.blue,
  home: MyHomePage(),
)

routes :
Table de navigation statique (sous forme de Map<String, WidgetBuilder>) qui associe un nom de route
à un widget. Utile pour gérer facilement la navigation.

Exemple

MaterialApp(
  routes: {
    '/': (context) => HomePage(),
    '/second': (context) => SecondPage(),
  },
)

initialRoute :
Spécifie la première routehome et initialRoute sont définis en même temps,
initialRoute prend la priorité.

Exemple

MaterialApp(
  initialRoute: '/second',
  routes: {
    '/': (context) => HomePage(),
    '/second': (context) => SecondPage(),
  },
)

onGenerateRoute :
Callback utilisé pour générer dynamiquement les routes lorsqu’elles ne sont pas définies
dans routes. Très utile si la navigation dépend d’arguments.

Exemple

MaterialApp(
  onGenerateRoute: (settings) {
    if (settings.name == '/profil') {
      final userId = settings.arguments as int;
      return MaterialPageRoute(
        builder: (context) => ProfilPage(id: userId),
      );
    }
    return null;
  },
)

onUnknownRoute :
Route de secours (fallback) appelée lorsqu’une route demandée n’existe pas.
Permet d’afficher une page d’erreur personnalisée.

Exemple

MaterialApp(
  onUnknownRoute: (settings) {
    return MaterialPageRoute(
      builder: (context) => ErrorPage(),
    );
  },
)

Exemple complet d’utilisation de MaterialApp

Code

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // 🔹 Titre visible dans le gestionnaire de tâches
      title: 'Mon Application Flutter',

      // 🔹 Thème global
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
        textTheme: TextTheme(
          bodyMedium: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
        ),
      ),

      // 🔹 Couleur principale pour le système (barre Android multitâche, etc.)
      color: Colors.blueAccent,

      // 🔹 Page affichée si aucune route initiale n’est spécifiée
      home: HomeScreen(),

      // 🔹 Table de routes nommées
      routes: {
        '/second': (context) => SecondScreen(),
      },

      // 🔹 Route initiale : remplace `home` si elle est définie
      initialRoute: '/',

      // 🔹 Génération dynamique de routes (utile avec des arguments)
      onGenerateRoute: (settings) {
        if (settings.name == '/profil') {
          final userId = settings.arguments as int;
          return MaterialPageRoute(
            builder: (context) => ProfilScreen(userId: userId),
          );
        }
        return null;
      },

      // 🔹 Route fallback si aucune correspondance trouvée
      onUnknownRoute: (settings) {
        return MaterialPageRoute(
          builder: (context) => ErrorScreen(),
        );
      },

      // 🔹 Supprimer le bandeau DEBUG
      debugShowCheckedModeBanner: false,
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Accueil')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () => Navigator.pushNamed(context, '/second'),
              child: Text('Aller à la deuxième page'),
            ),
            ElevatedButton(
              onPressed: () => Navigator.pushNamed(
                context,
                '/profil',
                arguments: 42, // exemple d'argument
              ),
              child: Text('Aller à la page Profil (id=42)'),
            ),
            ElevatedButton(
              onPressed: () => Navigator.pushNamed(context, '/inexistante'),
              child: Text('Aller à une route inexistante'),
            ),
          ],
        ),
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Deuxième Page')),
      body: Center(child: Text('Bienvenue sur la deuxième page !')),
    );
  }
}

class ProfilScreen extends StatelessWidget {
  final int userId;
  ProfilScreen({required this.userId});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Profil Utilisateur')),
      body: Center(child: Text('Profil de l’utilisateur #$userId')),
    );
  }
}

class ErrorScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Erreur')),
      body: Center(
        child: Text(
          'Oups ! Cette page n’existe pas.',
          style: TextStyle(color: Colors.red, fontSize: 20),
        ),
      ),
    );
  }
}

Comment supprimer la bannière DEBUG ?

Si vous exécutez votre application mobile Flutter, une étiquette DEBUG s’affichera dans le coin supérieurdroit.
Cette bande sera automatiquement supprimée lorsque vous créerez votre application mobile Flutter dans un mode de publication . Cependant, nous pouvons également la supprimer d’une application dedébogage.
Tout ce que vous avez à faire et de définir la propriété debugShowCheckedModeBanner sur false dans le widget MaterialApp de votre application.

Exemple

import 'package:flutter/material.dart'; void main() { runApp(const MaterialApp( debugShowCheckedModeBanner: false, title: "Nom de l'application", home: Material( color: Colors.teal, child: Center( child: Text( "Bonjour !", textDirection: TextDirection.ltr, style: TextStyle( color: Colors.white, fontWeight: FontWeight.bold, fontStyle: FontStyle.italic, fontSize: 35.0, ), ), ), ), )); }

Nous avons un widget Material qui permet de définir un élément de l’interface utilisateur en respectant les règles Matérial.
Le widgetMaterial() prend une couleur et possède un widget enfant Center().
Le widget Center() aligne son widget enfant Text() au centre de l’espace disponible sur l’écran.
Puis Text(), prend une chaîne de caractère et va l’afficher en spécifiant le style du texte en utilisant la classe TextStyle().
home : la page d’accueil est le premier widget à afficher lorsque l’application démarre normalement, sauf indication contraire.
Nous avons affiché un texte avec une couleur et une taille qu’on a définies

Différence entre Scaffold et MaterialApp dans Flutter

MaterialApp Widget est le point de départ de votre application, il indique à Flutter que vous allez utiliser les composants Material et suivre la conception matérielle dans votre application.
MaterialApp est un widget qui introduit un certain nombre de widgets Navigator, Theme qui sont nécessaires pour créer une application de conception de matériaux.
Widget Scaffold est utilisé sous MaterialApp, il vous offre de nombreuses fonctionnalités de base, comme AppBar, BottomNavigationBar, Drawer, FloatingActionButton, etc.

Cahier des charges – TP Flutter : Le widget MaterialApp

Objectifs pédagogiques

Comprendre le rôle du widget MaterialApp dans une application Flutter.
Configurer ses principales propriétés (title, theme, home, routes, initialRoute, onGenerateRoute, onUnknownRoute).
Mettre en place une navigation simple avec des routes nommées et des arguments.
Créer un écran d’erreur pour gérer les routes inexistantes.

Contexte

On souhaite développer une application Flutter de démonstration du widget MaterialApp.
Cette application permettra de naviguer entre plusieurs pages (Accueil, Deuxième page, Profil utilisateur),
avec une gestion des routes inconnues.

Contraintes techniques

Utiliser Flutter (version stable).
Respecter la structure du projet (classe principale MyApp + plusieurs pages).
Supprimer le bandeau DEBUG (debugShowCheckedModeBanner: false).
Utiliser un thème global (ThemeData) pour harmoniser l’interface.

Spécifications fonctionnelles

Écran d’accueil (HomeScreen)

Affiche un titre « Accueil ».
Contient 3 boutons :
- Aller à la Deuxième page (via /second).
- Aller à la Page Profil avec un argument (exemple id = 42).
- Aller à une route inexistante → doit afficher une page d’erreur.

Deuxième page (SecondScreen)

Affiche un titre « Deuxième Page ».
Contient un texte : « Bienvenue sur la deuxième page ! ».

Page Profil (ProfilScreen)

Affiche un titre « Profil Utilisateur ».
Récupère des arguments (id) transmis via Navigator.pushNamed.
Affiche le texte : « Profil de l’utilisateur #id : nom prénom ».

Page d’erreur (ErrorScreen)

Affiche un titre « Erreur ».
Message d’erreur en rouge : « Oups ! Cette page n’existe pas. ».

Spécifications techniques

Le widget MaterialApp doit inclure :

title: 'Mon Application Flutter'
theme: ThemeData (couleur primaire bleue, police en gras 18px)
color: Colors.blueAccent
home: HomeScreen()
routes : au moins une route statique (/second)
initialRoute: '/'
onGenerateRoute : pour gérer /profil avec un argument (userName)
onUnknownRoute : pour afficher une page d’erreur
debugShowCheckedModeBanner: false

Livrables attendus

Projet Flutter complet (code source).

L’application doit reproduire exactement l’interface et le fonctionnement montrés dans les 4 images fournies.
Toute différence visuelle ou fonctionnelle entraînera une perte de points.

Un petit document (README ou rapport) expliquant :
- Le rôle de chaque propriété de MaterialApp.
- La différence entre routes, onGenerateRoute et onUnknownRoute.
- Comment passer des arguments entre les pages.

Durée estimée

Mise en place du projet Flutter : 20 min
Création des pages et configuration de MaterialApp : 1h30
Tests (navigation, routes inexistantes, arguments) : 40 min

👉 Durée totale : environ 2h30 – 3h

Critères d’évaluation

Utilisation correcte de MaterialApp et de ses propriétés.
Navigation fonctionnelle entre les écrans.
Gestion correcte d’une route avec argument (/profil).
Page d’erreur fonctionnelle.
Code clair, commenté et lisible.

Images de références

Flutter

Le widget MaterialApp de Flutter