L'histoire Flutter continue, on va parler de Flutter, de navigation… Tout ce qu'il faut pour ne pas couler !

        |\
        | \
       /| F\
      / | LU\
     /  | TT \
    /   | ER  \
   /____|______\
 _______|_______
 \_o_o_o_o_o_o_/
~~              ~~~~~

Cet article vient compléter la suite d'articles d'introduction sur Flutter. Jusque ici nous avons vu :
- Qu'est ce que Flutter ?
- L'installation de Flutter pour Windows
- Créer une première application Flutter (-> c'est ici que nous avons commencé à créer l'application qui me servira d'exemple aujourd'hui)
- Ajouter un thème à notre application Flutter (-> ici aussi on a utilisé cette application pour la rendre un peu plus jolie)
- Ajouter un splashscreen à notre application Flutter
- Et aujourd'hui : Naviguer d'une page à l'autre avec Flutter (Inutile de cliquer, vous y êtes déjà)

Il est rare que les applications mobiles soient composées d'une seule page. Pour ajouter d'autres écrans il faut donc pouvoir naviguer entre ces écrans.

Il existe deux façon de naviguer vers une page (ou route) en Flutter :

• en utilisant des routes nommées
• en créant des routes à la volée

Navigation par les routes nommées

          _______
         //||  \ \
  ______//_||___\ \______
 /    _               _  (
 |___/ \__flutter____/ \_|
_____\_/___________\_/_______

Il est fréquent dans les applications mobiles d'avoir plusieurs façons d'arriver à une même page. Ainsi, le code pour naviguer vers cette page peut être redondant. C'est pour cela que nous allons commencer par parler de l'utilisation des routes nommées.

Dans notre classe MyApp (main.dart), nous avions défini dans un article précédent que nous allions créer une application de type MaterialApp.

La classe MaterialApp possède une propriété routes de type Map<String, WidgetBuilder>. C'est ici que nous allons définir les routes que nous allons utiliser dans l'application. Pour cela, il suffit d'ajouter des éléments dans la liste. La clé est la route que nous allons utiliser pour accéder à notre page et la valeur est notre widget contenant notre page cible. De cette manière, la façon de naviguer vers notre seconde page n'est définie qu'une seule fois, dans la classe MyApp.
Nous pouvons également définir la propriété initialRoute qui sera, comme son nom l'indique, la page initiale affichée par l'application.

return MaterialApp(
    title: 'Flutter Demo',
    theme: theme,
    routes: {
      '/': (context) => MyHomePage(title: "Connexion"),
      '/secondPage': (context) => MySecondPage(title: "Deuxième page"),
    },
    initialRoute: '/');

Une fois nos routes définies, il suffit d'appeler la méthode suivante pour naviguer vers notre seconde page

Navigator.pushNamed(context, '/secondPage');

Puis la méthode suivante pour revenir à la page précédante :

Navigator.pop(context)

Navigation en créant des routes à la volée

Au lieu d'utiliser les routes nommée avec la méthode Navigator.pushNamed, il est possible d'utiliser la méthode Navigator.pushpour créer les routes à la volée. Comme expliqué précédemment cette méthode peut créer de la redondance de code si notre application possède plusieurs façon de naviguer vers une même page. Mais si votre application est simple, si vous n'avez pas plusieurs façon d'arriver à une même page, ou n'importe quelle autre raison que vous trouverez, vous pouvez utiliser cette seconde méthode pour naviguer.

Cette méthode est tout aussi simple, car il suffit d'appeler la méthode suivante pour naviguer vers notre seconde page. Celle-ci prend deux paramètres : le context et la nouvelle route (de type MaterialPageRoute) vers notre seconde page.

Navigator.push(context,
              MaterialPageRoute<void>(
                builder:(BuildContext context) { 
                  return MySecondPage(title: "Deuxième page");
                }));

Utiliser la classeMaterialPageRoute permet de naviguer vers la nouvelle page en utilisant les animations de navigations propre à la plateforme cible.

Puis pour revenir à la page précédente, nous utilisons toujours la méthode suivante :

Navigator.pop(context)

Voila, que ce soit à l'aide de la première méthode ou de la seconde, nous sommes maintenant capables de naviguer entre deux pages. Mais mais mais ce n'est pas suffisant ! Ah bon ? Eh oui, il est souvent nécessaire de faire passer des données d'une page à l'autre. Nous allons donc maintenant voir comment....

Passer des données d'une page à l'autre

Les fins observateurs que vous êtes avez sans doute remarqué que lorsque je navigue vers ma page MySecondPage, je passe un paramètre title. Effectivement, pour passer des données à ma nouvelle page, j'utilise le constructeur de celle-ci :

class MySecondPage extends StatelessWidget {  
  MySecondPage({@required this.title});
...
}

Avec les routes nommées

En utilisant la méthode des routes, pour passer des paramètres à notre seconde page au moment de naviguer (en dehors de la route définie dans la classe MyApp donc), nous pouvons utiliser la méthode suivante :

Navigator.pushNamed( context, '/secondPage', 
  arguments: <String, String>{
    'title':"Deuxième page",
  },
);

Et notre route ressemblerait à ceci :

routes: {
  ...
  '/secondPage': (context) => MySecondPage(),
},

Sans les routes nommées

En utilisant la méthode sans les routes, pour passer des paramètres à notre seconde page nous utilisons la méthode vue précédemment en les passant dans le constructeur de la seconde page. Effectivement, j'avais déjà passé mon paramètre title à ce moment là :

Navigator.push(context,
              MaterialPageRoute<void>(
                builder:(BuildContext context) { 
                  return MySecondPage(title: "Deuxième page");
                }));

TADA ! Nous pouvons maintenant naviguer d'une page à l'autre puis de l'autre à l'une et ainsi de suite.