Einen neuen Bildschirm öffnen

Teil des Abschnitts Listen und Bildschirme der Flutter-Journey von Coddy. Lektion 18 von 33.

Apps haben mehr als einen Bildschirm: eine Liste, dann die Details zu einem Eintrag, dann eine Einstellungsseite. In Flutter ist ein Bildschirm ein Widget, üblicherweise ein Scaffold in einer eigenen Klasse.

Der Navigator hält deine Bildschirme in einem Stapel, wie einen Kartenstapel. Der oberste ist der, den du siehst. Navigator.push legt einen neuen Bildschirm obenauf:

Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => const AboutScreen()),
);

MaterialPageRoute schiebt den neuen Bildschirm so hinein, wie es ein Smartphone tut. Sein builder ist eine Funktion, die den anzuzeigenden Bildschirm zurückgibt.

context teilt dem Navigator mit, wo du dich im Widget-Baum befindest. Deshalb ist HomeScreen eine eigene Klasse innerhalb von MaterialApp: Über ihren context kann sie den Navigator finden, den MaterialApp erstellt.

Aufgabe

Einfach

Die Schaltfläche About this app bewirkt noch nichts. Lass sie AboutScreen mit Navigator.push öffnen.

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 const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomeScreen(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Home')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {},
          child: const Text('About this app'),
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('About')),
      body: const Center(
        child: Text('Made with Flutter'),
      ),
    );
  }
}