Avez-vous une question? (216) 97 656 803 hajjriadh@gmail.com
Flutter

Gestion de l'historique de navigation dans Flutter

Un cours complet pour maîtriser Gestion de l'historique de navigation dans Flutter.

0 chapitres 0 QCM Accès gratuit
Commencer Retour aux cours
Sommaire du cours
Qu'est-ce que Flutter ?
Comment installer Flutter sous Windows
Créer un nouveau projet Flutter
Interface utilisateur (UI) Android
Créez votre première application Flutter
Utiliser GridView dans Flutter
Le widget TextButton dans Flutter
Row et Column dans Flutter
Créer une application mobile avec Flutter
Le widget SnackBar dans Flutter
Qu'est ce qu'un widget dans Flutter ?
Comment créer un formulaire de connexion en flutter
Le widget TextField dans Flutter
Récupérer la valeur d'un TextField dans Flutter
Architecture d'une application Flutter
Autres catégories
News
Microsoft Office
Les cours de programmation
MOS
WordPress
Ressources pédagogiques
Voir tout le catalogue

  1. Objectif

    • L'objectif de cette séance est de vous fournir une compréhension approfondie de la gestion de l'historique de navigation dans Flutter. À la fin de ce tutoriel, vous serez capable de :
    • Créer une application Flutter avec une navigation de base entre plusieurs pages.
    • Gérer l'historique de navigation pour permettre des transitions fluides entre les pages.
    • Implémenter une navigation conditionnelle basée sur l'état de connexion de l'utilisateur.

  2. Introduction à la navigation dans Flutter

    • La navigation et le routage sont des aspects fondamentaux du développement d'applications. Ils permettent aux utilisateurs de se déplacer entre différents écrans et d'effectuer différentes actions. Dans Flutter, la gestion de l'historique de navigation se fait via une pile d'itinéraires, où chaque itinéraire représente un nouvel écran ou une nouvelle page. Flutter utilise le package Dart « dart:ui » pour gérer cette pile de routes.
    • La navigation dans Flutter se fait principalement à l'aide de la classe Navigator. Cette classe permet de gérer une pile de routes (ou pages) et offre diverses méthodes pour ajouter ou retirer des routes de la pile.
      1. Définitions
        • Route: Une route est une page ou un écran de votre application.
        • Navigator : Un widget qui gère une pile de routes.
      2. Activités
        • Naviguer vers une nouvelle page: Ajouter une nouvelle route à la pile.
        • Revenir à la page précédente: Retirer la route actuelle de la pile.

  3. Comprendre l'historique de navigation

    • L'historique de navigation est une pile de routes que l'utilisateur a visitées. Chaque fois qu'une nouvelle page est affichée, elle est poussée sur la pile. Lorsqu'on revient à la page précédente, la route actuelle est retirée de la pile.
      1. Exemple
        • Imaginons une application avec trois pages : A, B, et C. Si l'utilisateur navigue de A vers B, puis de B vers C, la pile ressemblera à ceci :[A, B, C]
        • Si l'utilisateur revient à la page B, la pile devient :[A, B]
      2. Naviguer vers un nouvel itinéraire
        • Pour naviguer vers un nouvel itinéraire, vous pouvez utiliser la méthode Navigator.push. Cette méthode ajoute la route spécifiée en haut de la pile de routes. Flutter anime automatiquement la transition vers le nouvel itinéraire pour vous. Voici un exemple de la façon dont vous pouvez utiliser Navigator.push :
            Navigator.push( contexte, MaterialPageRoute(builder : (contexte) => SecondRoute()), );
          Cela amènera Flutter à créer le widget SecondRoute et à l'animer sur l'écran, en superposant l'itinéraire actuel.
      3. Revenir à l'itinéraire précédent
        • Lorsque vous souhaitez revenir à l'itinéraire précédent, vous pouvez utiliser la méthode Navigator.pop.
        • Cette méthode supprime la route supérieure de la pile et revient à la route précédente. Voici un exemple de la façon dont vous pouvez utiliser Navigator.pop: 
            Navigateur.pop (contexte);
          Cela permettra à Flutter de retirer l'itinéraire actuel de la pile et de revenir à l'itinéraire précédent, animant ainsi la transition pour vous.
      4. Naviguer vers un itinéraire nommé
        • Pour naviguer vers un itinéraire nommé, vous pouvez utiliser la méthode Navigator.pushNamed.
        • Cette méthode place la route portant le nom spécifié en haut de la pile. Voici un exemple de la façon dont vous pouvez utiliser Navigator.pushNamed :
            Navigator.pushNamed(contexte, '/seconde');

  4. Naviguer entre les pages

    • Flutter offre plusieurs méthodes pour naviguer entre les pages :
      • Navigator.push: Pousse une nouvelle route sur la pile.
      • Navigator.pop: Retire la route actuelle de la pile.
      • Navigator.pushNamed : Pousse une route nommée sur la pile.
      • Navigator.pushReplacement : Remplace la route actuelle par une nouvelle route.
        1. Exemple
            Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => NewPage()),
);
          • Pour revenir à la page précédente :Navigator.pop(context);
        2. Gérer l'historique de navigation
          • La gestion de l'historique de navigation implique de manipuler la pile de routes pour offrir une expérience utilisateur optimale.
          • Supprimer toutes les routes jusqu'à une route spécifique
              Navigator.pushNamedAndRemoveUntil(
  context,
  '/newRoute',
  ModalRoute.withName('/home'),
);
          • Remplacer la route actuelle
              Navigator.pushReplacement(
  context,
  MaterialPageRoute(builder: (context) => NewPage()),
);

  5. Exemples pratiques

    1. Exemple 1 : Navigation de base
        import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      initialRoute: '/',
      routes: {
        '/': (context) => HomePage(),
        '/second': (context) => SecondPage(),
        '/third': (context) => ThirdPage(),
      },
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Home Page')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pushNamed(context, '/second');
          },
          child: Text('Go to Second Page'),
        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Second Page')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pushNamed(context, '/third');
          },
          child: Text('Go to Third Page'),
        ),
      ),
    );
  }
}

class ThirdPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Third Page')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.popUntil(context, ModalRoute.withName('/'));
          },
          child: Text('Go to Home Page'),
        ),
      ),
    );
  }
}
    2. Exemple 2 : Remplacement de la route actuelle
        import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      initialRoute: '/',
      routes: {
        '/': (context) => HomePage(),
        '/second': (context) => SecondPage(),
        '/third': (context) => ThirdPage(),
      },
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Home Page')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pushReplacementNamed(context, '/second');
          },
          child: Text('Replace with Second Page'),
        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Second Page')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pushReplacementNamed(context, '/third');
          },
          child: Text('Replace with Third Page'),
        ),
      ),
    );
  }
}

class ThirdPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Third Page')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pushReplacementNamed(context, '/');
          },
          child: Text('Replace with Home Page'),
        ),
      ),
    );
  }
}

  6. Applications

    1. Exercice 1 : Navigation de base
      • Créez une application avec cinq pages : Accueil, Produits , Magasin, Vendeurs et Vente.
      • Ajoutez des boutons pour naviguer entre les pages.
      • Ajouter un menu pour chaque qui vous permet de naviguer entre les pages
    2. Exercice 2 : Gestion de l'historique de navigation
      • Modifiez l'application précédente pour utiliser Navigator.pushReplacement et Navigator.pushNamedAndRemoveUntil.
      • Assurez-vous que l'utilisateur peut revenir à la page d'accueil depuis n'importe quelle page sans recharger la page.
    3. Exercice 3 : Navigation conditionnelle
      • Ajoutez une condition pour vérifier si l'utilisateur est connecté avant de naviguer vers la Vente.
      • Si l'utilisateur n'est pas connecté, affichez un message d'erreur et restez sur la page actuelle.

  7. Solution

      Voir la solution
      1. Exercice 1 : Navigation de base
      2. Objectif
        • Créez une application avec cinq pages : Accueil, Produits, Magasin, Vendeurs, et Vente. Ajoutez des boutons pour naviguer entre les pages et un menu pour chaque page qui permet de naviguer entre les pages.
      3. Étapes
        • Créez un projet Flutter.
        • Ajoutez cinq pages : HomePage, ProductsPage, StorePage, SellersPage, et SalesPage.
        • Ajoutez des boutons et un menu pour naviguer entre les pages.

          1. Étape 1 : Créez un projet Flutter

              flutter create navigation_example
cd navigation_example

          2. Étape 2 : Créez les cinq pages

            • main.dart
                import 'package:flutter/material.dart';
import 'home_page.dart';
import 'products_page.dart';
import 'store_page.dart';
import 'sellers_page.dart';
import 'sales_page.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Navigation Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      initialRoute: '/',
      routes: {
        '/': (context) => HomePage(),
        '/products': (context) => ProductsPage(),
        '/store': (context) => StorePage(),
        '/sellers': (context) => SellersPage(),
        '/sales': (context) => SalesPage(),
      },
    );
  }
}
            • home_page.dart
                import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Accueil'),
        actions: [buildMenu(context)],
      ),
      body: Center(
        child: Text('Bienvenue à la page d\'accueil!'),
      ),
    );
  }

  Widget buildMenu(BuildContext context) {
    return PopupMenuButton(
      onSelected: (String value) {
        Navigator.pushNamed(context, value);
      },
      itemBuilder: (BuildContext context) {
        return [
          PopupMenuItem(
            value: '/products',
            child: Text('Produits'),
          ),
          PopupMenuItem(
            value: '/store',
            child: Text('Magasin'),
          ),
          PopupMenuItem(
            value: '/sellers',
            child: Text('Vendeurs'),
          ),
          PopupMenuItem(
            value: '/sales',
            child: Text('Vente'),
          ),
        ];
      },
    );
  }
}
              • Créez des pages similaires pour products_page.dart, store_page.dart, sellers_page.dart, et sales_page.dart.
            • products_page.dart
                import 'package:flutter/material.dart';

class ProductsPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Produits'),
        actions: [buildMenu(context)],
      ),
      body: Center(
        child: Text('Bienvenue à la page des produits!'),
      ),
    );
  }

  Widget buildMenu(BuildContext context) {
    return PopupMenuButton(
      onSelected: (String value) {
        Navigator.pushNamed(context, value);
      },
      itemBuilder: (BuildContext context) {
        return [
          PopupMenuItem(
            value: '/',
            child: Text('Accueil'),
          ),
          PopupMenuItem(
            value: '/store',
            child: Text('Magasin'),
          ),
          PopupMenuItem(
            value: '/sellers',
            child: Text('Vendeurs'),
          ),
          PopupMenuItem(
            value: '/sales',
            child: Text('Vente'),
          ),
        ];
      },
    );
  }
}
            • Répétez ce processus pour les autres pages (store_page.dart, sellers_page.dart, sales_page.dart).
            • store_page.dart
                import 'package:flutter/material.dart';

class StorePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Magasin'),
        actions: [buildMenu(context)],
      ),
      body: Center(
        child: Text('Bienvenue à la page du magasin!'),
      ),
    );
  }

  Widget buildMenu(BuildContext context) {
    return PopupMenuButton(
      onSelected: (String value) {
        Navigator.pushNamed(context, value);
      },
      itemBuilder: (BuildContext context) {
        return [
          PopupMenuItem(
            value: '/',
            child: Text('Accueil'),
          ),
          PopupMenuItem(
            value: '/products',
            child: Text('Produits'),
          ),
          PopupMenuItem(
            value: '/sellers',
            child: Text('Vendeurs'),
          ),
          PopupMenuItem(
            value: '/sales',
            child: Text('Vente'),
          ),
        ];
      },
    );
  }
}
            • sellers_page.dart
                import 'package:flutter/material.dart';

class SellersPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Vendeurs'),
        actions: [buildMenu(context)],
      ),
      body: Center(
        child: Text('Bienvenue à la page des vendeurs!'),
      ),
    );
  }

  Widget buildMenu(BuildContext context) {
    return PopupMenuButton(
      onSelected: (String value) {
        Navigator.pushNamed(context, value);
      },
      itemBuilder: (BuildContext context) {
        return [
          PopupMenuItem(
            value: '/',
            child: Text('Accueil'),
          ),
          PopupMenuItem(
            value: '/products',
            child: Text('Produits'),
          ),
          PopupMenuItem(
            value: '/store',
            child: Text('Magasin'),
          ),
          PopupMenuItem(
            value: '/sales',
            child: Text('Vente'),
          ),
        ];
      },
    );
  }
}
            • sales_page.dart
                import 'package:flutter/material.dart';

class SalesPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Vente'),
        actions: [buildMenu(context)],
      ),
      body: Center(
        child: Text('Bienvenue à la page des ventes!'),
      ),
    );
  }

  Widget buildMenu(BuildContext context) {
    return PopupMenuButton(
      onSelected: (String value) {
        Navigator.pushNamed(context, value);
      },
      itemBuilder: (BuildContext context) {
        return [
          PopupMenuItem(
            value: '/',
            child: Text('Accueil'),
          ),
          PopupMenuItem(
            value: '/products',
            child: Text('Produits'),
          ),
          PopupMenuItem(
            value: '/store',
            child: Text('Magasin'),
          ),
          PopupMenuItem(
            value: '/sellers',
            child: Text('Vendeurs'),
          ),
        ];
      },
    );
  }
}
            • Explications
              • Chaque fichier Dart définit une page avec une AppBar, un PopupMenuButton pour naviguer entre les différentes pages, et un Center widget pour afficher le contenu de la page.
              • Le PopupMenuButton contient des PopupMenuItem pour chaque page de votre application.
              • La fonction onSelected de chaque PopupMenuButton utilise Navigator.pushNamed pour naviguer vers la page sélectionnée.
          3. Exercice 2 : Gestion de l’historique de navigation
            • Objectif
              • Modifiez l’application précédente pour utiliser Navigator.pushReplacement et Navigator.pushNamedAndRemoveUntil. Assurez-vous que l’utilisateur peut revenir à la page d’accueil depuis n’importe quelle page sans recharger la page.
            • Étapes
              • Modifiez les fonctions de navigation pour utiliser Navigator.pushReplacement et Navigator.pushNamedAndRemoveUntil.
              • main.dart (pas de modification nécessaire pour ce fichier)
              • home_page.dart
                  import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Accueil'),
        actions: [buildMenu(context)],
      ),
      body: Center(
        child: Text('Bienvenue à la page d\'accueil!'),
      ),
    );
  }

  Widget buildMenu(BuildContext context) {
    return PopupMenuButton(
      onSelected: (String value) {
        Navigator.pushReplacementNamed(context, value);
      },
      itemBuilder: (BuildContext context) {
        return [
          PopupMenuItem(
            value: '/products',
            child: Text('Produits'),
          ),
          PopupMenuItem(
            value: '/store',
            child: Text('Magasin'),
          ),
          PopupMenuItem(
            value: '/sellers',
            child: Text('Vendeurs'),
          ),
          PopupMenuItem(
            value: '/sales',
            child: Text('Vente'),
          ),
        ];
      },
    );
  }
}
              • Modifiez également les autres pages pour utiliser Navigator.pushReplacementNamed.
              • products_page.dart
                  import 'package:flutter/material.dart';

class ProductsPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Produits'),
        actions: [buildMenu(context)],
      ),
      body: Center(
        child: Text('Bienvenue à la page des produits!'),
      ),
    );
  }

  Widget buildMenu(BuildContext context) {
    return PopupMenuButton(
      onSelected: (String value) {
        if (value == '/') {
          Navigator.pushNamedAndRemoveUntil(context, value, (Route route) => false);
        } else {
          Navigator.pushReplacementNamed(context, value);
        }
      },
      itemBuilder: (BuildContext context) {
        return [
          PopupMenuItem(
            value: '/',
            child: Text('Accueil'),
          ),
          PopupMenuItem(
            value: '/store',
            child: Text('Magasin'),
          ),
          PopupMenuItem(
            value: '/sellers',
            child: Text('Vendeurs'),
          ),
          PopupMenuItem(
            value: '/sales',
            child: Text('Vente'),
          ),
        ];
      },
    );
  }
}
              • Répétez ce processus pour les autres pages (store_page.dart, sellers_page.dart, sales_page.dart).
            • Exercice 3 : Navigation conditionnelle
              • Objectif
                • Ajoutez une condition pour vérifier si l’utilisateur est connecté avant de naviguer vers la page des vendeurs. Si l’utilisateur n’est pas connecté, affichez un message d’erreur et restez sur la page actuelle.
              • Étapes
                • Simulez l’état de connexion de l’utilisateur.
                • Ajoutez une condition pour vérifier si l’utilisateur est connecté avant de naviguer vers la page des vendeurs.
                • main.dart (pas de modification nécessaire pour ce fichier)
                • home_page.dart
                    import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {
  final bool isLoggedIn = false; // Simule l'état de connexion de l'utilisateur

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Accueil'),
        actions: [buildMenu(context)],
      ),
      body: Center(
        child: Text('Bienvenue à la page d\'accueil!'),
      ),
    );
  }

  Widget buildMenu(BuildContext context) {
    return PopupMenuButton(
      onSelected: (String value) {
        if (value == '/sellers' && !isLoggedIn) {
          ScaffoldMessenger.of(context).showSnackBar(
            SnackBar(content: Text('Vous devez être connecté pour accéder à cette page.')),
          );
        } else {
          Navigator.pushReplacementNamed(context, value);
        }
      },
      itemBuilder: (BuildContext context) {
        return [
          PopupMenuItem(
            value: '/products',
            child: Text('Produits'),
          ),
          PopupMenuItem(
            value: '/store',
            child: Text('Magasin'),
          ),
          PopupMenuItem(
            value: '/sellers',
            child: Text('Vendeurs'),
          ),
          PopupMenuItem(
            value: '/sales',
            child: Text('Vente'),
          ),
        ];
      },
    );
  }
}
                • Répétez cette vérification pour les autres pages où vous souhaitez ajouter cette condition de connexion. Par exemple, dans products_page.dart :
                    import 'package:flutter/material.dart';

class ProductsPage extends StatelessWidget {
  final bool isLoggedIn = false; // Simule l'état de connexion de l'utilisateur

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Produits'),
        actions: [buildMenu(context)],
      ),
      body: Center(
        child: Text('Bienvenue à la page des produits!'),
      ),
    );
  }

  Widget buildMenu(BuildContext context) {
    return PopupMenuButton(
      onSelected: (String value) {
        if (value == '/sellers' && !isLoggedIn) {
          ScaffoldMessenger.of(context).showSnackBar(
            SnackBar(content: Text('Vous devez être connecté pour accéder à cette page.')),
          );
        } else {
          Navigator.pushReplacementNamed(context, value);
        }
      },
      itemBuilder: (BuildContext context) {
        return [
          PopupMenuItem(
            value: '/',
            child: Text('Accueil'),
          ),
          PopupMenuItem(
            value: '/store',
            child: Text('Magasin'),
          ),
          PopupMenuItem(
            value: '/sellers',
            child: Text('Vendeurs'),
          ),
          PopupMenuItem(
            value: '/sales',
            child: Text('Vente'),
          ),
        ];
      },
    );
  }
}
                • Conclusion
                  • En suivant ces exercices, vous devriez maintenant être capable de :
                  • Créer une application Flutter avec une navigation de base entre plusieurs pages.
                  • Gérer l'historique de navigation pour permettre des transitions fluides entre les pages.
                  • Implémenter une navigation conditionnelle basée sur l'état de connexion de l'utilisateur.