Własna klasa Widgetu

Część sekcji Dodajemy interaktywność ścieżki Flutter w Coddy. Lekcja 9 z 34.

Każdy widżet, którego używasz, taki jak Text, Row czy Scaffold, jest klasą napisaną przez kogoś. Możesz napisać własną, a jedną już masz: MyApp.

Od teraz Twoje aplikacje mają dwie klasy. MyApp konfiguruje aplikację za pomocą MaterialApp, a ekran ma własną klasę, HomePage:

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

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

extends StatelessWidget sprawia, że HomePage jest widżetem. Wiersz const HomePage({super.key}); pozwala Ci napisać HomePage(): skopiuj go bez zmian, używając nazwy swojej klasy. build zwraca to, co wyświetla widżet.

Użyj go jak każdego innego widżetu: home: HomePage(). Ekran we własnej klasie jest łatwiejszy do odczytania, a w kolejnych lekcjach pozwoli zmieniać ekran, podczas gdy otaczająca go aplikacja pozostanie taka sama.

Wyzwanie

Łatwy

Klasa HomePage jest zdefiniowana na dole pliku, ale aplikacja nadal wyświetla stary ekran Coming soon.

Dodaj do Scaffold w HomePage pasek AppBar z tytułem Notes.
Spraw, aby MyApp go wyświetlał: zastąp cały Scaffold po home: przez HomePage().

Spróbuj swoich sił

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