A seta Voltar

Parte da seção Listas e telas do Journey de Flutter da Coddy. Lição 19 de 33.

Uma tela que você empilha precisa de uma maneira de voltar. Um AppBar oferece isso sem custo: quando há uma tela abaixo dela na pilha, a barra do aplicativo mostra uma seta para voltar no início.

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

Ao tocar na seta, a tela do topo é removida da pilha, e a tela abaixo dela aparece novamente como estava. O gesto de voltar do próprio telefone e o botão Voltar do Android fazem o mesmo.

A primeira tela do aplicativo não tem nenhuma tela abaixo dela, então sua barra do aplicativo não mostra nenhuma seta.

Desafio

Fácil

Abra os detalhes no telefone: não há como voltar. Adicione à DetailScreen uma AppBar com o título Details, para que ela tenha uma seta para voltar.

Experimente você mesmo

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