Naviguer entre les Écrans en Flutter – Tout Savoir sur le Navigator

Introduction : Pourquoi la Navigation est-elle essentielle ?

Dans une application Flutter, il est rare d’avoir un seul écran. Les utilisateurs doivent pouvoir naviguer entre différentes pages : une page d’accueil, une page de connexion, un écran de paramètres…

Flutter propose une solution efficace grâce au Navigator, qui gère la pile d’écrans et permet d’afficher, de masquer et de remplacer des vues dynamiquement. Dans cet article, nous allons explorer les différentes manières de gérer la navigation entre les écrans en Flutter.

| source: https://tuto-flutter.fr/coder-avec-flutter/navigation-pages

1️⃣ Navigation de Base avec Navigator.push() et Navigator.pop()

Le Navigator fonctionne comme une pile (stack) où chaque nouvel écran s’empile au-dessus des précédents.

➡ Aller vers un nouvel écran avec Navigator.push()

La méthode Navigator.push() permet d’ouvrir un nouvel écran au-dessus de l’écran actuel.

Exemple : Navigation entre deux pages

Créons deux fichiers : main.dart (page principale) et page2.dart (deuxième page).

main.dart :

import 'package:flutter/material.dart';
import 'page2.dart'; // Importation de la seconde page

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: const Page1(),
    );
  }
}

class Page1 extends StatelessWidget {
  const Page1({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Page 1')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => const Page2()),
            );
          },
          child: const Text('Aller à la Page 2'),
        ),
      ),
    );
  }
}

page2.dart :

import 'package:flutter/material.dart';

class Page2 extends StatelessWidget {
  const Page2({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Page 2')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context); // Revenir à la page précédente
          },
          child: const Text('Retour à la Page 1'),
        ),
      ),
    );
  }
}

🔹 Explication :

• Navigator.push() ajoute un nouvel écran à la pile.
• Navigator.pop() ferme l’écran courant et revient en arrière.

| source: https://tuto-flutter.fr/coder-avec-flutter/navigation-pages

2️⃣ Navigation avec des Routes Nommées

Lorsque ton application comporte plusieurs pages, gérer la navigation avec des routes nommées permet d’organiser le code plus proprement.

Définition des routes dans main.dart :

import 'package:flutter/material.dart';
import 'page2.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      initialRoute: '/', // Définition de la route de départ
      routes: {
        '/': (context) => const Page1(),
        '/page2': (context) => const Page2(),
      },
    );
  }
}

class Page1 extends StatelessWidget {
  const Page1({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Page 1')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pushNamed(context, '/page2'); // Utilisation de la route nommée
          },
          child: const Text('Aller à la Page 2'),
        ),
      ),
    );
  }
}

🔹 Pourquoi utiliser des routes nommées ?
✅ Plus lisible que MaterialPageRoute pour de grandes applications.
✅ Facile à gérer si on veut rediriger un utilisateur après une action.

| source: https://tuto-flutter.fr/coder-avec-flutter/navigation-pages

3️⃣ Envoyer et Recevoir des Données entre les Écrans

Il est souvent nécessaire d’envoyer des paramètres à une page (exemple : un ID utilisateur).

Passer un paramètre à Page2 :

Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => Page2(nom: 'Billy')),
);

Dans Page2 (réception du paramètre) :

class Page2 extends StatelessWidget {
  final String nom;

  const Page2({Key? key, required this.nom}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Bonjour $nom')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context, 'Merci d\'être venu !'); // Retourner un message
          },
          child: const Text('Retour'),
        ),
      ),
    );
  }
}

Recevoir la réponse après pop() :

var message = await Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => Page2(nom: 'Billy')),
);
print(message); // Affichera "Merci d'être venu !"

| source: https://tuto-flutter.fr/coder-avec-flutter/navigation-pages

4️⃣ Navigation Avancée : Suppression et Remplacement des Pages

Remplacer un écran (pushReplacement())

Si un utilisateur se connecte, il ne doit pas pouvoir revenir à la page de connexion.

Navigator.pushReplacement(
  context,
  MaterialPageRoute(builder: (context) => HomePage()),
);

Supprimer plusieurs pages (popUntil())

Pour forcer le retour à la première page :

Navigator.popUntil(context, ModalRoute.withName('/'));

| source de l'article : https://tuto-flutter.fr/coder-avec-flutter/navigation-pages | source de l'image : https://user-images.githubusercontent.com/8863026/89007050-417afe00-d308-11ea-95dd-5c73100a5ea4.gif

Conclusion

Nous avons exploré toutes les méthodes essentielles pour gérer la navigation en Flutter :
✅ push() et pop() pour une navigation simple.
✅ Les routes nommées pour une organisation propre.
✅ Le passage et la récupération de données entre les écrans.
✅ Les méthodes avancées comme pushReplacement() et popUntil().

👉 Dans le prochain article, nous verrons comment créer un menu de navigation avec BottomNavigationBar et Drawer pour une application Flutter multi-pages plus avancée.

📚 Références :

-Site officiel de Flutter : https://flutter.dev/ (Page consultée le 2 mars 2025).
Documentation Flutter : https://docs.flutter.dev/ (Page consultée le 2 mars 2025).
FAQ Flutter : https://docs.flutter.dev/resources/faq (Page consultée le 2 mars 2025).
Flutter (logiciel) – Wikipédia : https://fr.wikipedia.org/wiki/Flutter_(logiciel) (Page consultée le 2 mars 2025).
Flutter sur GitHub (open source) : https://github.com/flutter/flutter (Page consultée le 2 mars 2025). Comment naviguer entre les pages de son application Flutter ? : https://tuto-flutter.fr/coder-avec-flutter/navigation-pages (Page consultée le 2 mars 2025).

À très bientôt pour le prochain article !