Der Zurück-Pfeil

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

Ein Bildschirm, den du auf den Stapel schiebst, braucht eine Möglichkeit zurückzukehren. Eine AppBar bietet sie dir kostenlos: Wenn sich darunter ein Bildschirm im Stapel befindet, zeigt die App-Leiste am Anfang einen Zurück-Pfeil an.

Scaffold(
  appBar: AppBar(title: const Text('Details')),
  body: ...,
)

Wenn du auf den Pfeil tippst, wird der oberste Bildschirm vom Stapel entfernt und der Bildschirm darunter wird wieder so angezeigt, wie er war. Die Zurück-Geste des Telefons und die Android-Zurück-Taste bewirken dasselbe.

Unter dem ersten Bildschirm der App befindet sich nichts, daher zeigt seine App-Leiste keinen Pfeil an.

Aufgabe

Einfach

Öffne die Details auf dem Smartphone: Es gibt keinen Weg zurück. Gib DetailScreen eine AppBar mit dem Titel Details, damit ein Zurück-Pfeil angezeigt wird.

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: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => const DetailScreen()),
            );
          },
          child: const Text('Open details'),
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: const Center(
        child: Text('Here are the details'),
      ),
    );
  }
}