1.

Applications
o App01
o Créer une application Flutter basique à deux ou trois pages utilisant l’API
Navigator 2.0:
o Dans cet exemple, nous définissons les chemins de navigation nommés
dans le MaterialApp en utilisant la propriété routes.
o Lorsque l’utilisateur clique sur le bouton « la première page« , la
méthode Navigator.pushNamed est appelée pour naviguer vers la
seconde page.
o Lorsque l’utilisateur clique sur le bouton « la seconde page« , la
méthode Navigator.pop est appelée pour retourner à la première page.
Exemple avec deux pages

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {

@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Navigator 2.0 Example',
initialRoute: '/',
routes: {
'/': (context) => FirstPage(),
'/second': (context) => SecondPage(),
},
);
}
}

class FirstPage extends StatelessWidget {

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('La première page'),
),
body: Center(
child: ElevatedButton(
onPressed: () {
Navigator.pushNamed(context, '/second');
},
child: const Text('Aller à la deuxième page'),
),
),
);
}
}

class SecondPage extends StatelessWidget {

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('La deuxième page'),
),
body: Center(
child: ElevatedButton(
onPressed: () {
Navigator.pop(context);
},
child: const Text('Retour'),
),
),
);
}
}

Exemple avec trois pages

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {

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

class FirstPage extends StatelessWidget {

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Première page'),
),
body: Center(
 child: ElevatedButton(
child: const Text('Aller à la deuxième page'),
onPressed: () {
Navigator.pushNamed(context, '/second');
},
),
),
);
}
}

class SecondPage extends StatelessWidget {

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Deuxième page'),
),
body: Center(
child: ElevatedButton(
child: const Text('Aller à la troisième page'),
onPressed: () {
Navigator.pushNamed(context, '/third');
},
),
),
);
}
}

class ThirdPage extends StatelessWidget {

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Troisème page'),
),
body: Center(
child: ElevatedButton(
child: const Text('Retour'),
onPressed: () {
Navigator.pop(context);
},
),
),
);
}
}
 o App02
• Vous devez demander la réalisation d'une application Flutter composée de trois
écrans, avec deux boutons sur chaque écran permettant de naviguer vers l'une
des deux autres pages. Il est intéressant de constater l'effet de pile grâce à
l'AppBar. Après avoir atteint le premier écran, l'AppBar dispose d'une flèche de
retour en arrière qui permet de remonter dans la pile, similaire à ce que fait la
méthode pop de Navigator
• L’image suivant décrit les trois pages à réaliser