Ouvrir un nouvel écran

Fait partie de la section Listes et écrans du Journey Flutter de Coddy. Leçon 18 sur 33.

Les applications comportent plusieurs écrans : une liste, puis les détails d’un élément, puis une page de paramètres. Dans Flutter, un écran est un widget, généralement un Scaffold dans sa propre classe.

Le Navigator conserve vos écrans dans une pile, comme un jeu de cartes. Celui du dessus est celui que vous voyez. Navigator.push place un nouvel écran au-dessus :

Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => const AboutScreen()),
);

MaterialPageRoute fait apparaître le nouvel écran en le faisant glisser, comme sur un téléphone. Son builder est une fonction qui renvoie l’écran à afficher.

context indique au Navigator où vous vous trouvez dans l’arborescence des widgets. C’est pourquoi HomeScreen est une classe à part entière, à l’intérieur de MaterialApp : son context peut trouver le navigateur créé par MaterialApp.

Défi

Facile

Le bouton About this app ne fait encore rien. Fais-le ouvrir AboutScreen avec Navigator.push.

Essayez vous-même

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Home')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {},
          child: const Text('About this app'),
        ),
      ),
    );
  }
}

class AboutScreen extends StatelessWidget {
  const AboutScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('About')),
      body: const Center(
        child: Text('Made with Flutter'),
      ),
    );
  }
}