Uma classe de Widget própria

Parte da seção Tornando o app interativo do Journey de Flutter da Coddy. Lição 9 de 34.

Cada widget que você usou, Text, Row, Scaffold, é uma classe que alguém escreveu. Você pode criar a sua própria, e já tem uma: MyApp.

A partir de agora, seus aplicativos terão duas classes. MyApp configura o aplicativo com MaterialApp, e a tela ganha uma classe própria, HomePage:

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

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

extends StatelessWidget transforma HomePage em um widget. A linha const HomePage({super.key}); é o que permite escrever HomePage(): copie-a exatamente como está, usando o nome da sua classe. build retorna o que o widget exibe.

Use-o como qualquer outro widget: home: HomePage(). Uma tela em sua própria classe é mais fácil de ler e, nas próximas lições, permite que a tela mude enquanto o aplicativo ao redor permanece igual.

Desafio

Fácil

A classe HomePage está escrita no final do arquivo, mas o app ainda exibe a antiga tela Coming soon.

Adicione uma AppBar com o título Notes ao Scaffold em HomePage.
Faça MyApp exibi-la: substitua todo o Scaffold depois de home: por HomePage().

Experimente você mesmo

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