Mở màn hình mớ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 18 trên 33.

Ứng dụng thường có nhiều màn hình: một danh sách, rồi phần chi tiết của một mục, rồi trang cài đặt. Trong Flutter, một màn hình là một widget, thường là một Scaffold trong lớp riêng.

Navigator giữ các màn hình trong một ngăn xếp, giống như một chồng thẻ. Màn hình trên cùng là màn hình bạn nhìn thấy. Navigator.push đặt màn hình mới lên trên:

Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => const AboutScreen()),
);

MaterialPageRoute tạo hiệu ứng trượt màn hình mới vào, giống như trên điện thoại. builder là một hàm trả về màn hình cần hiển thị.

context cho Navigator biết vị trí của bạn trong cây widget. Đó là lý do HomeScreen là một lớp riêng, nằm trong MaterialApp: context của lớp này có thể tìm thấy navigator mà MaterialApp tạo ra.

Thử thách

Dễ

Nút About this app chưa làm gì cả. Hãy thiết lập để nút mở AboutScreen bằng Navigator.push.

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: () {},
          child: const Text('About this app'),
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('About')),
      body: const Center(
        child: Text('Made with Flutter'),
      ),
    );
  }
}