Una classe Widget tutta tua

Fa parte della sezione Rendere l’app interattiva del percorso Flutter di Coddy. Lezione 9 di 34.

Ogni widget che hai usato, Text, Row, Scaffold, è una classe scritta da qualcuno. Puoi scriverne una tua e ne hai già una: MyApp.

D'ora in poi le tue app avranno due classi. MyApp configura l'app con MaterialApp, mentre la schermata ha una classe tutta sua, HomePage:

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

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

extends StatelessWidget rende HomePage un widget. La riga const HomePage({super.key}); ti permette di scrivere HomePage(): copiala così com'è, usando il nome della tua classe. build restituisce ciò che il widget mostra.

Usala come qualsiasi altro widget: home: HomePage(). Una schermata nella sua classe è più facile da leggere e, nelle prossime lezioni, permette alla schermata di cambiare mentre il resto dell'app rimane uguale.

Sfida

Facile

La classe HomePage è scritta in fondo al file, ma l'app mostra ancora la sua vecchia schermata Coming soon.

Aggiungi a Scaffold in HomePage una AppBar intitolata Notes.
Fai in modo che MyApp la mostri: sostituisci l'intero Scaffold dopo home: con HomePage().

Provalo tu

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