Eine eigene Widget-Klasse

Teil des Abschnitts Apps interaktiv gestalten der Flutter-Journey von Coddy. Lektion 9 von 34.

Jedes Widget, das du verwendet hast – Text, Row, Scaffold – ist eine Klasse, die jemand geschrieben hat. Du kannst deine eigenen schreiben, und du hast bereits eine: MyApp.

Von nun an haben deine Apps zwei Klassen. MyApp richtet die App mit MaterialApp ein, und der Bildschirm erhält eine eigene Klasse, HomePage:

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

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

extends StatelessWidget macht HomePage zu einem Widget. Die Zeile const HomePage({super.key}); ermöglicht es dir, HomePage() zu schreiben: Übernimm sie unverändert und verwende dabei den Namen deiner Klasse. build gibt zurück, was das Widget anzeigt.

Verwende es wie jedes andere Widget: home: HomePage(). Ein Bildschirm in einer eigenen Klasse ist leichter zu lesen, und in den nächsten Lektionen kannst du so den Bildschirm ändern, während die App außen herum gleich bleibt.

Aufgabe

Einfach

Die Klasse HomePage steht am Ende der Datei, aber die App zeigt weiterhin ihren alten Bildschirm „Demnächst verfügbar“ an.

Gib dem Scaffold in HomePage eine AppBar mit dem Titel Notes.
Sorge dafür, dass MyApp ihn anzeigt: Ersetze das gesamte Scaffold nach home: durch HomePage().

Probier es selbst

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