La flecha de retroceso

Parte de la sección Listas y pantallas del Journey de Flutter de Coddy. Lección 19 de 33.

Una pantalla a la que navegas necesita una forma de volver. Una AppBar te la ofrece gratis: cuando hay una pantalla debajo en la pila, la barra de la aplicación muestra una flecha hacia atrás al principio.

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

Al tocar la flecha, se quita la pantalla superior de la pila y vuelve a mostrarse la pantalla que estaba debajo, tal como estaba. El gesto para volver del propio teléfono y el botón de retroceso de Android hacen lo mismo.

La primera pantalla de la aplicación no tiene ninguna debajo, así que su barra de la aplicación no muestra ninguna flecha.

Desafío

Fácil

Abre los detalles en el teléfono: no hay forma de volver. Dale a DetailScreen una AppBar titulada Details, para que tenga una flecha de retroceso.

Pruébalo tú mismo

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