Una clase Widget propia

Parte de la sección Cómo hacerla interactiva del Journey de Flutter de Coddy. Lección 9 de 34.

Cada widget que has usado, Text, Row, Scaffold, es una clase que alguien escribió. Puedes escribir la tuya y ya tienes una: MyApp.

A partir de ahora, tus aplicaciones tienen dos clases. MyApp configura la aplicación con MaterialApp, y la pantalla tiene su propia clase, HomePage:

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

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

extends StatelessWidget hace que HomePage sea un widget. La línea const HomePage({super.key}); es lo que te permite escribir HomePage(): cópiala tal cual, con el nombre de tu clase. build devuelve lo que muestra el widget.

Úsala como cualquier otro widget: home: HomePage(). Una pantalla en su propia clase es más fácil de leer y, en las próximas lecciones, permitirá que la pantalla cambie mientras la aplicación que la rodea permanece igual.

Desafío

Fácil

La clase HomePage está escrita al final del archivo, pero la aplicación todavía muestra su antigua pantalla Coming soon.

Añade al Scaffold de HomePage una AppBar con el título Notes.
Haz que MyApp la muestre: reemplaza todo el Scaffold después de home: por HomePage().

Pruébalo tú mismo

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')),
    );
  }
}