The Back Arrow

Part of the Lists and Screens section of Coddy's Flutter journey. Lesson 19 of 33.

A screen you push needs a way back. An AppBar gives you one for free: when there is a screen under it in the stack, the app bar shows a back arrow at its start.

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

Tapping the arrow takes the top screen off the stack, and the screen under it shows again, as it was. The phone's own back gesture and the Android back button do the same.

The first screen of the app has nothing under it, so its app bar shows no arrow.

Challenge

Easy

Open the details on the phone: there is no way back. Give the DetailScreen an AppBar titled Details, so it gets a back arrow.

Try it yourself

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