Стрелка «Назад»

Часть раздела Списки и экраны путешествия по Flutter на Coddy. Урок 19 из 33.

Экран, на который вы переходите, должен иметь способ вернуться назад. AppBar предоставляет его бесплатно: если под ним в стеке есть экран, панель приложения показывает стрелку «Назад» в начале.

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

При нажатии на стрелку верхний экран удаляется из стека, и экран под ним снова отображается в прежнем виде. Жест возврата на телефоне и кнопка «Назад» на Android работают так же.

Под первым экраном приложения ничего нет, поэтому на его панели приложения стрелка не отображается.

Задание

Легко

Открой экран подробностей на телефоне: вернуться назад невозможно. Добавь DetailScreen AppBar с заголовком Details, чтобы появилась стрелка назад.

Попробуйте сами

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