Une classe de widget à vous

Fait partie de la section Rendre l’application interactive du Journey Flutter de Coddy. Leçon 9 sur 34.

Chaque widget que tu as utilisé, Text, Row, Scaffold, est une classe écrite par quelqu’un. Tu peux écrire la tienne, et tu en as déjà une : MyApp.

À partir de maintenant, tes applications ont deux classes. MyApp configure l’application avec MaterialApp, et l’écran a sa propre classe, HomePage :

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(child: Text('Hi')),
    );
  }
}

extends StatelessWidget fait de HomePage un widget. La ligne const HomePage({super.key}); te permet d’écrire HomePage() : copie-la telle quelle, en utilisant le nom de ta classe. build renvoie ce que le widget affiche.

Utilise-la comme n’importe quel autre widget : home: HomePage(). Un écran dans sa propre classe est plus facile à lire et, dans les prochaines leçons, cela permet à l’écran de changer tandis que l’application qui l’entoure reste la même.

Défi

Facile

La classe HomePage est écrite en bas du fichier, mais l’application affiche toujours son ancien écran Coming soon.

Ajoute au Scaffold de HomePage une AppBar intitulée Notes.
Fais en sorte que MyApp l’affiche : remplace tout le Scaffold après home: par HomePage().

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 MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(child: Text('Coming soon')),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(child: Text('No notes yet')),
    );
  }
}