Quay lại bằng nút

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 20 trên 33.

Mũi tên quay lại không phải là cách duy nhất để quay về. Khi nhấn nút Lưu hoặc Xong, màn hình cũng cần đóng lại. Navigator.pop gỡ màn hình trên cùng khỏi ngăn xếp, giống như mũi tên quay lại:

ElevatedButton(
  onPressed: () {
    Navigator.pop(context);
  },
  child: const Text('Save'),
)

Push và pop là một cặp: push đưa màn hình vào, pop gỡ màn hình ra. Đẩy màn hình chính lên lại sẽ không đưa bạn quay về. Thao tác đó sẽ đặt thêm một màn hình chính lên trên cùng của ngăn xếp, với mũi tên quay lại dẫn đến phần cài đặt.

Thử thách

Dễ

Nút Save trên màn hình cài đặt không làm gì cả. Hãy để nút này đóng màn hình cài đặt và quay lại màn hình chính bằng Navigator.pop.

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 SettingsScreen()),
            );
          },
          child: const Text('Open settings'),
        ),
      ),
    );
  }
}

class SettingsScreen extends StatelessWidget {
  const SettingsScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Settings')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {},
          child: const Text('Save'),
        ),
      ),
    );
  }
}