2.3.2 – Le paramètre home

Dans la section précédente, nous avons utilisé le paramètre home de MaterialApp. Dans cette section, nous allons comprendre exactement ce qu'est ce paramètre et comment l'utiliser.

🏠 Le premier écran de l'application

Le paramètre home définit le premier écran de votre application. C'est ce qui s'affiche quand l'utilisateur ouvre votre application pour la première fois.

📦 Accepte un widget enfant

Le paramètre home accepte n'importe quel widget. Cela signifie que vous pouvez y mettre ce que vous voulez : du texte, une image, un bouton, ou même une combinaison de plusieurs widgets.

Pour l'instant, nous n'avons vu que le widget Text(). C'est parfait pour commencer !

🧪 Exemple : home = Text()

Voici un exemple simple avec Text() :

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Text('Bienvenue dans mon application !'),
  ));
}

Dans ce code :

• MaterialApp crée l'application
• home: définit le premier écran
• Text('Bienvenue dans mon application !') est le widget affiché

🎨 Expérimenter avec home

Essayez de modifier le texte dans Text() :

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Text('Ma première application Flutter !'),
  ));
}

Changez le texte entre les guillemets et observez le résultat. C'est votre premier écran personnalisé !

💡 Points clés à retenir

• Le paramètre home définit le premier écran de l'application
• Il accepte n'importe quel widget
• Il est obligatoire si vous voulez afficher quelque chose
• Pour l'instant, nous utilisons Text() comme exemple simple

2.3.3 – Aligner un widget avec Center

Actuellement, votre texte s'affiche probablement en haut à gauche de l'écran. Pour créer une interface plus agréable, il serait mieux de centrer le texte. C'est là que le widget Center entre en jeu.

🎯 Rôle de Center

Le widget Center centre son contenu au milieu de l'écran (horizontalement et verticalement). C'est un widget très simple mais très utile.

📦 Le paramètre child

Center utilise le paramètre child pour définir ce qu'il doit centrer. C'est le widget qui sera affiché au centre.

Voici la structure de base :

Center(
  child: Text('Mon texte'),
)

Dans cet exemple, Text('Mon texte') est l'enfant de Center. Le texte sera donc centré à l'écran.

🧪 Exemple : Center + Text

Voici comment utiliser Center avec Text() dans votre application :

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Center(
      child: Text('Bonjour Flutter !'),
    ),
  ));
}

Analysons ce code :

1. MaterialApp crée l'application
2. home: définit le premier écran
3. Center( crée un widget qui centre son contenu
4. child: Text('Bonjour Flutter !') définit le texte à centrer
5. ) ferme le widget Center

🌳 Structure de l'arbre de widgets

Voici comment les widgets sont organisés dans cet exemple :

MaterialApp
  └── home: Center
      └── child: Text('Bonjour Flutter !')

MaterialApp contient Center, qui contient Text(). C'est un arbre de widgets simple mais efficace.

💡 Points clés à retenir

• Center centre son contenu au milieu de l'écran
• Il utilise le paramètre child pour définir ce qu'il doit centrer
• Le paramètre child est très courant en Flutter
• Center peut contenir n'importe quel widget (pas seulement Text())

2.3.4 – Structurer une page avec Scaffold

Jusqu'à présent, nous avons affiché du texte centré. C'est bien pour commencer, mais une vraie application a besoin d'une structure plus complète : une barre en haut, une zone de contenu, etc. C'est là que Scaffold entre en jeu.

🏗️ Pourquoi un Scaffold ?

Scaffold est un widget qui fournit une structure de base pour une page Flutter. Il crée automatiquement :

• Une zone pour le contenu principal (le corps de la page)
• Un espace pour une barre supérieure (que nous verrons dans la prochaine section)
• Une gestion automatique des zones sûres (pour éviter que le contenu soit caché par les encoches des téléphones)

📝 Ajout d'un Scaffold minimal

Voici comment utiliser Scaffold de manière minimale :

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      body: Center(
        child: Text('Bonjour Flutter !'),
      ),
    ),
  ));
}

Analysons ce code :

• MaterialApp crée l'application
• home: définit le premier écran
• Scaffold( crée la structure de la page
• body: définit le contenu principal de la page
• Center( centre le contenu
• child: Text('Bonjour Flutter !') affiche le texte

🛡️ Utilisation recommandée de SafeArea

Sur certains téléphones modernes, il y a des encoches (notches) ou des zones qui peuvent cacher une partie de l'écran. Pour éviter que votre contenu soit caché, Flutter propose le widget SafeArea.

SafeArea garantit que son contenu reste dans les zones sûres de l'écran (zones qui ne seront jamais cachées).

Voici un exemple sans SafeArea : le texte pourrait être masqué si l'appareil possède une encoche ou une barre système en haut.
Le widget Scaffold fournit la structure de la page, mais n'empêche pas le contenu d'être caché par les zones à éviter.

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      body: Text('Bonjour Flutter !'),
    ),
  ));
}

Voici maintenant la version avec SafeArea :

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      body: SafeArea(
        child: Text('Bonjour Flutter !'),
      ),
    ),
  ));
}

MaterialApp
  └── home: Scaffold
      └── body: SafeArea
          └── child: (votre contenu ici)

💡 Points clés à retenir

• Scaffold fournit une structure de base pour une page
• Le paramètre body définit le contenu principal
• SafeArea garantit que le contenu reste dans les zones sûres
• Il est recommandé d'utiliser SafeArea dans le body de Scaffold

2.3.5 – Ajouter une barre supérieure avec AppBar

Maintenant que vous avez une page structurée avec Scaffold, ajoutons une barre supérieure. C'est une barre qui apparaît en haut de l'écran et qui peut contenir un titre, des boutons, etc. En Flutter, cette barre s'appelle AppBar.

📊 Rôle d'une AppBar

Une AppBar (Application Bar) est une barre qui apparaît en haut de l'écran. Elle sert généralement à :

• Afficher le titre de la page ou de l'application
• Fournir des boutons d'action (menu, recherche, etc.)
• Donner une apparence professionnelle à l'application

🔧 AppBar dans Scaffold

AppBar s'utilise avec Scaffold. Le paramètre appBar de Scaffold permet d'ajouter une barre supérieure.

Voici comment l'ajouter :

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(),
      body: SafeArea(
        child: Center(
          child: Text('Bonjour Flutter !'),
        ),
      ),
    ),
  ));
}

Ici, nous avons ajouté appBar: AppBar() dans le Scaffold. Cela crée une barre supérieure vide (sans titre pour l'instant).

📝 Le paramètre title

Pour ajouter un titre à la barre, utilisez le paramètre title :

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: Text('Mon Application'),
      ),
      body: SafeArea(
        child: Center(
          child: Text('Bonjour Flutter !'),
        ),
      ),
    ),
  ));
}

Analysons ce code :

• appBar: AppBar( crée une barre supérieure
• title: Text('Mon Application') définit le titre affiché dans la barre
• ) ferme le widget AppBar

Le paramètre title :
Le paramètre title de AppBar accepte un widget. Ici, nous utilisons Text() pour afficher du texte, mais vous pourriez utiliser d'autres widgets plus tard. les autres composants de l'AppBar

• leading : le widget à gauche (ex : icône de menu, bouton retour)
• title : le titre centré de la barre
• actions : une liste de widgets à droite (ex : boutons, menus, icônes d’action)
• bottom : une barre en bas de l’AppBar (généralement pour des onglets, TabBar)

🌳 Structure complète

Voici la structure complète de l'arbre de widgets avec AppBar :

MaterialApp
  └── home: Scaffold
      ├── appBar: AppBar
      │   └── title: Text('Mon Application')
      └── body: SafeArea
          └── child: Center
              └── child: Text('Bonjour Flutter !')

C'est un arbre plus complexe, mais chaque widget a un rôle clair :

• MaterialApp : L'application principale
• Scaffold : La structure de la page
• AppBar : La barre supérieure avec le titre
• SafeArea : Garantit que le contenu reste visible
• Center : Centre le contenu
• Text() : Affiche le texte

💡 Points clés à retenir

• AppBar crée une barre supérieure pour votre page
• Elle s'utilise avec le paramètre appBar de Scaffold
• Le paramètre title définit le titre affiché dans la barre
• AppBar donne une apparence professionnelle à votre application

2.3.6 – Hot Reload avec StatelessWidget

Jusqu'à présent, nous avons écrit tout notre code directement dans la fonction main(). C'est bien pour apprendre, mais pour utiliser le Hot Reload efficacement et créer des applications plus complexes, nous devons organiser notre code différemment. C'est là que StatelessWidget entre en jeu.

⚡ Comprendre le Hot Reload

Le Hot Reload est une fonctionnalité de Flutter qui permet de voir vos modifications de code instantanément dans l'application, sans avoir à redémarrer complètement l'application.

👀 Voir les modifications instantanément

Pour tester le Hot Reload, essayez ceci :

1. Lancez votre application (bouton "Run" dans votre éditeur)
2. Modifiez le texte dans Text(), par exemple changez "Bonjour Flutter !" en "Hello Flutter !"
3. Sauvegardez le fichier (Ctrl+S) ou cliquez sur le bouton Hot Reload (⚡) dans votre éditeur
4. Observez : le texte change instantanément dans l'application !

🏗️ Utiliser StatelessWidget

Pour que le Hot Reload fonctionne de manière optimale, il est recommandé d'organiser votre code avec des widgets personnalisés. StatelessWidget est la base pour créer vos propres widgets.

Voici comment transformer votre code pour utiliser StatelessWidget :

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: MaPage(),
  ));
}

class MaPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Mon Application'),
      ),
      body: SafeArea(
        child: Center(
          child: Text('Bonjour Flutter !'),
        ),
      ),
    );
  }
}

Analysons ce code :

• class MaPage extends StatelessWidget : Crée une classe qui représente votre page. Elle hérite de StatelessWidget.
• @override : Indique que nous redéfinissons une méthode de la classe parente.
• Widget build(BuildContext context) : Cette méthode est appelée par Flutter pour construire l'interface. Elle doit retourner un widget.
• return Scaffold(...) : Retourne le widget qui sera affiché (notre structure complète).
• home: MaPage() : Utilise notre widget personnalisé comme premier écran.

Deuxième façon recommandée

Il existe une autre façon d'organiser votre code : vous pouvez mettre MaterialApp directement dans la méthode build() de votre widget personnalisé :

import 'package:flutter/material.dart';

void main() {
  runApp(const MaPage());
}

class MaPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Mon Application'),
        ),
        body: const SafeArea(
          child: Center(
            child: Text('Bonjour Flutter !'),
          ),
        ),
      ),
    );
  }
}

Dans cette version :

• runApp(const MaPage()) appelle directement votre widget personnalisé avec le mot-clé const
• MaterialApp est maintenant dans la méthode build() au lieu d'être dans main()
• debugShowCheckedModeBanner: false masque la bannière de débogage en haut à droite
• Les widgets sont marqués avec const pour optimiser les performances

🛠️ Le constructeur de MaPage avec super.key

Depuis les dernières versions de Flutter, il est recommandé de passer super.key dans le constructeur du widget, surtout lorsqu’on crée un widget StatelessWidget ou StatefulWidget. Cela permet d’associer à chaque widget une clé (« key ») qui aide Flutter à gérer l’arbre des widgets de façon plus efficace lors des reconstructions.

class MaPage extends StatelessWidget {
  const MaPage({super.key}); // 👈 Passage de la clé au parent

  @override
  Widget build(BuildContext context) {
    // ... reste du code
  }
}

🔄 Différence entre Hot Reload et Hot Restart

Il existe deux façons de mettre à jour votre application :

Hot Reload (Rechargement à chaud)

• Vitesse : Très rapide (moins d'une seconde)
• Ce qu'il fait : Met à jour uniquement le code modifié, préserve l'état de l'application
• Quand l'utiliser : Pour modifier l'interface, changer du texte, ajuster des styles
• Limitation : Ne fonctionne pas pour certains changements (modification de la fonction main(), ajout de nouvelles classes, etc.)

Hot Restart (Redémarrage à chaud)

• Vitesse : Plus lent que Hot Reload (quelques secondes)
• Ce qu'il fait : Redémarre l'application complètement, réinitialise tout l'état
• Quand l'utiliser : Quand Hot Reload ne fonctionne pas, ou quand vous voulez réinitialiser l'état de l'application
• Avantage : Fonctionne pour tous les types de modifications

💡 Points clés à retenir

• Le Hot Reload permet de voir les modifications instantanément
• StatelessWidget permet de créer des widgets personnalisés
• La méthode build() retourne ce qui doit être affiché
• Hot Reload est rapide et préserve l'état
• Hot Restart redémarre complètement l'application