Mũi tên quay lại

Thuộc phần Danh sách và màn hình trong hành trình Flutter của Coddy. Bài học 19 trên 33.

Màn hình bạn điều hướng đến cần có cách quay lại. AppBar cung cấp sẵn cách đó: khi có một màn hình nằm bên dưới nó trong ngăn xếp, thanh ứng dụng sẽ hiển thị mũi tên quay lại ở đầu thanh.

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

Chạm vào mũi tên sẽ đưa màn hình trên cùng ra khỏi ngăn xếp, rồi màn hình bên dưới hiện lại như trước. Thao tác quay lại của điện thoại và nút quay lại trên Android cũng làm tương tự.

Màn hình đầu tiên của ứng dụng không có màn hình nào bên dưới, nên thanh ứng dụng không hiển thị mũi tên.

Thử thách

Dễ

Mở trang chi tiết trên điện thoại: không có cách nào quay lại. Thêm AppBar có tiêu đề Details vào DetailScreen để màn hình có nút mũi tên quay lại.

Tự làm thử

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