Comment naviguer entre les pages de votre application Flutter

Comment naviguer entre les pages de votre application Flutter

1. Objectif

• Dans cet article, nous allons implémenter une logique de navigation entre les pages afin que vous puissiez guider vos utilisateurs vers l’objectif.

2. Présentation

• La navigation est un concept fondamental dans le développement d’applications mobiles. Il permet aux utilisateurs de passer d’un écran à l’autre. Une navigation bien gérée maintient votre application organisée et améliore ses capacités.
• La navigation est très importante pour toute application. Il fournit une abstraction uniforme sur les API de navigation fournies par diverses plates-formes. Flutter fournit deux types d’API pour la navigation : impérative et déclarative.
• Imperative navigation (Flutter 1.0)
• Flutter Navigator class
• Named routes
• Declarative navigation (Flutter 2.0)
• Flutter Navigator
• Utilisation de RouterDelegate
• RouteInformationParser
• Putting it all together
• Navigator 2.0 est la référence standard à la navigation déclarative et ne remplace pas Navigator 1.0, car vous pouvez les utiliser ensemble.
• Navigator 2.0 propose une nouvelle conception d’API déclarative, , pour le widget Pagesexistant . NavigatorIl introduit également un nouveau Routerwidget.
• Dans une application Flutter, il existe 3 façons différentes pour naviguer entre les pages
• Navigator: Ce widget fournit un stack d’affichage pour les pages et permet de naviguer entre elles en utilisant les méthodes push et pop
• PageRouteBuilder: Il s’agit d’une classe abstraite qui permet de créer une animation personnalisée lors de la transition entre les pages.
• MaterialPageRoute: C’est une classe qui implémente et est utilisée pour créer une animation par défaut lors de la transition entre les pagesPageRoute





3. Qu’est-ce que la navigation dans Flutter ?

• La navigation dans Flutter fait référence au passage d’un écran ou d’une page à un autre au sein de votre application. Il s’agit d’un aspect fondamental de la création d’applications mobiles, permettant aux utilisateurs d’explorer de manière transparente différentes sections ou fonctionnalités. Flutter fournit divers outils et techniques pour mettre en œuvre efficacement la navigation.
• Dans Flutter, les écrans et les pages sont appelés itinéraires, et ces itinéraires ne sont qu’un widget. Sous Android, un itinéraire est similaire à une activité, tandis que sous iOS, il équivaut à un ViewController.
• Dans n’importe quelle application mobile, la navigation vers différentes pages définit le flux de travail de l’application, et la manière de gérer la navigation est appelée routage.
• Flutter fournit une classe de routage de base MaterialPageRoute et deux méthodes Navigator.push() et Navigator.pop() qui montrent comment naviguer entre deux itinéraires. Les étapes suivantes sont nécessaires pour démarrer la navigation dans votre application.

4. Utilisation de Navigator.push()

1. Utilisation

• Le moyen le plus courant de naviguer vers une nouvelle page dans Flutter consiste à utiliser la méthode Navigator.push.
• La méthode Navigator.push() est utilisée pour naviguer/passer à un nouvel itinéraire/page/écran.

onPressed: () {
  Navigator.push(
    context,
    MaterialPageRoute(builder: (context) => SecondScreen()),
  );
}

• Navigator.push prend deux arguments : le contexte et un objet Route.
• context est un BuildContext que Flutter utilise pour localiser le navigateur dans l’arborescence des widgets.
• Nous créons un MaterialPageRoute et spécifions la fonction builder, qui renvoie le widget à afficher sur la nouvelle page. Dans ce cas, il s’agit de SecondScreen.

2. Exemple

• Dans cet exemple, nous allons créer deux itinéraires de navigation. Dans les deux itinéraires, nous n’avons créé qu’un seul bouton. Lorsque nous appuyons sur le bouton de la première page, nous accédons à la deuxième page. Encore une fois, lorsque nous appuyons sur le bouton de la deuxième page, nous revenons à la première page.

import 'package:flutter/material.dart';

// Point d'entrée principal de l'application
void main() {
  runApp(MyApp());
}

// MyApp est le widget racine de l'application
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // Titre de l'application
      title: 'Flutter Navigation Demo',
      // Définition du thème de l'application
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      // Première page affichée lors du démarrage de l'application
      home: FirstPage(),
    );
  }
}

// FirstPage est un widget sans état qui représente la première page
class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // AppBar en haut de la page avec un titre
      appBar: AppBar(
        title: Text('First Page'),
      ),
      // Corps de la page contenant un bouton centré
      body: Center(
        child: ElevatedButton(
          // Action exécutée lors de l'appui sur le bouton
          onPressed: () {
            // Navigation vers la deuxième page en utilisant Navigator.push
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => SecondPage()),
            );
          },
          // Texte affiché sur le bouton
          child: Text('Go to Second Page'),
        ),
      ),
    );
  }
}

// SecondPage est un widget sans état qui représente la deuxième page
class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // AppBar en haut de la page avec un titre
      appBar: AppBar(
        title: Text('Second Page'),
      ),
      // Corps de la page contenant un bouton centré
      body: Center(
        child: ElevatedButton(
          // Action exécutée lors de l'appui sur le bouton
          onPressed: () {
            // Retour à la première page en utilisant Navigator.pop
            Navigator.pop(context);
          },
          // Texte affiché sur le bouton
          child: Text('Go back to First Page'),
        ),
      ),
    );
  }
}

3. Explication de Code

• Importation des packages :
• import 'package:flutter/material.dart'; : Importation du package Flutter nécessaire pour construire l’interface utilisateur.
• Fonction principale :
void main() { runApp(MyApp()); } : Point d’entrée principal de l’application qui lance MyApp.
• Classe MyApp :
• MyApp est un widget sans état qui initialise l’application Flutter.
• MaterialApp configure le titre, le thème et la première page (FirstPage) de l’application.
• Classe FirstPage :
• FirstPage est un widget sans état qui représente la première page de l’application.
• Utilise Scaffold pour créer une structure de page avec une AppBar et un bouton centré.
• Le bouton utilise Navigator.push pour naviguer vers SecondPage lorsqu’il est pressé.
• Classe SecondPage :
• SecondPage est un widget sans état qui représente la deuxième page de l’application.
• Utilise Scaffold pour créer une structure de page avec une AppBar et un bouton centré.
• Le bouton utilise Navigator.pop pour revenir à FirstPage lorsqu’il est pressé.

5. Utilisation de Navigator.pop()

1. Utilisation

• Lorsque vous êtes sur un nouvel écran et que vous souhaitez revenir au précédent, vous pouvez utiliser la méthode Navigator.pop.

onPressed: () {
  Navigator.pop(context);
}

• Navigator.pop prend également un argument de contexte, supprime l’itinéraire actuel de la pile et revient à l’itinéraire précédent.

2. Exemple

• Même exemple précédent

3. Fonctionnement de Navigator.pop

• Naviguer vers la deuxième page :
• Lorsqu’on appuie sur le bouton « Go to Second Page » dans FirstPage, Navigator.push est utilisé pour ajouter SecondPage en haut de la pile de navigation.
• Retour à la première page :
• Lorsqu’on appuie sur le bouton « Go back to First Page » dans SecondPage, Navigator.pop est utilisé pour supprimer SecondPage de la pile et revenir à FirstPage.
• Navigator.pop(context) prend le contexte comme argument, supprime la route actuelle de la pile de navigation et revient à la route précédente. Cela permet une navigation fluide et intuitive dans l’application Flutter.

6. Utilisation des itinéraires nommés

1. Utilisation

• Bien que les exemples ci-dessus fonctionnent bien pour les petites applications, il est courant d’utiliser des itinéraires nommés pour les applications plus volumineuses afin de conserver une structure de navigation claire et organisée.
• Les itinéraires nommés vous permettent de les spécifier et d’y accéder par leur nom sans créer un nouveau MaterialPageRoute à chaque fois.

void main() => runApp(
  MaterialApp(
    initialRoute: '/',
    routes: {
      '/': (context) => HomeScreen(),
      '/second': (context) => SecondScreen(),
    },
  ),
);

• Dans ce code, nous définissons deux routes nommées : ‘/‘ pour le HomeScreen et ‘/second’ pour le SecondScreen. La propriété initialRoute spécifie le nom de l’itinéraire initial à afficher lors de la première ouverture de l’application.

Pour accéder à un itinéraire nommé, vous pouvez utiliser le code suivant :

onPressed: () {
  Navigator.pushNamed(context, '/second');
}

• Navigator.pushNamed est utilisé pour parcourir l’itinéraire ‘/second’, correspondant au SecondScreen.

2. Exemple