Navigation
La navigation dans une application Flutter permet de passer d'un écran à un autre de manière fluide et intuitive. Voici quelques éléments clés à connaître pour mettre en place la navigation dans votre application :
Navigator : La classe Navigator est responsable de la gestion des routes et de la navigation entre les écrans. Vous pouvez utiliser différentes méthodes de la classe Navigator pour naviguer entre les écrans, telles que push, pushNamed, pop, etc.
Routes nommées : Les routes nommées permettent de définir des chemins prédéfinis pour naviguer entre les écrans. Chaque route est identifiée par un nom unique, ce qui facilite la navigation dans l'application.
PageRoute : Les écrans de votre application sont généralement des widgets encapsulés dans des objets PageRoute. Il existe différents types de PageRoute, tels que MaterialPageRoute, CupertinoPageRoute, etc., qui définissent le comportement de transition entre les écrans.
BuildContext : Le contexte de construction (BuildContext) est utilisé pour accéder à des informations telles que le thème de l'application, la langue locale, etc., ainsi que pour naviguer entre les écrans à l'aide de la classe Navigator.
Voici un exemple simple de navigation entre deux écrans dans Flutter :
// Premier écran
class FirstScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Premier écran'),
),
body: Center(
child: ElevatedButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => SecondScreen()),
);
},
child: Text('Aller à l\'écran suivant'),
),
),
);
}
}
// Deuxième écran
class SecondScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Deuxième écran'),
),
body: Center(
child: ElevatedButton(
onPressed: () {
Navigator.pop(context);
},
child: Text('Retour'),
),
),
);
}
}
Dans cet exemple, l'utilisateur peut naviguer de l'écran FirstScreen à l'écran SecondScreen en appuyant sur un bouton, puis revenir à l'écran précédent en appuyant sur un autre bouton. La méthode Navigator.push est utilisée pour naviguer vers l'avant, tandis que la méthode Navigator.pop est utilisée pour revenir en arrière.
Last updated