Mit einer Schaltfläche zurückgehen

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

Der Zurück-Pfeil ist nicht der einzige Weg zurück. Eine Schaltfläche „Speichern“ oder „Fertig“ sollte ihren Bildschirm ebenfalls schließen, wenn sie gedrückt wird. Navigator.pop nimmt den obersten Bildschirm vom Stapel, genau wie der Zurück-Pfeil:

ElevatedButton(
  onPressed: () {
    Navigator.pop(context);
  },
  child: const Text('Save'),
)

Push und Pop bilden ein Paar: Push legt einen Bildschirm auf den Stapel, Pop nimmt ihn wieder herunter. Den Startbildschirm erneut aufzurufen würde nicht zurückführen. Es würde einen zweiten Startbildschirm oben auf den Stapel legen, mit einem Zurück-Pfeil, der zu den Einstellungen führt.

Aufgabe

Einfach

Die Schaltfläche Save auf dem Einstellungsbildschirm bewirkt nichts. Sorge dafür, dass sie den Einstellungsbildschirm schließt und mit Navigator.pop zum Startbildschirm zurückkehrt.

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 SettingsScreen()),
            );
          },
          child: const Text('Open settings'),
        ),
      ),
    );
  }
}

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

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