La freccia Indietro

Fa parte della sezione Elenchi e schermate del percorso Flutter di Coddy. Lezione 19 di 33.

Una schermata che apri ha bisogno di un modo per tornare indietro. Una AppBar te ne offre uno gratuitamente: quando nello stack c'è una schermata sotto di essa, la barra dell'app mostra una freccia indietro all'inizio.

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

Toccando la freccia, la schermata in cima viene rimossa dallo stack e quella sottostante viene mostrata di nuovo, così com'era. Anche il gesto indietro del telefono e il pulsante Indietro di Android fanno lo stesso.

La prima schermata dell'app non ha nulla sotto di sé, quindi la sua barra dell'app non mostra alcuna freccia.

Sfida

Facile

Apri i dettagli sul telefono: non c'è modo di tornare indietro. Assegna a DetailScreen una AppBar intitolata Details, così avrà una freccia indietro.

Provalo tu

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