Navigation hoạt động như thế nào trong Flutter?

Question

Accepted Answer

**Navigation** trong Flutter di chuyển giữa các màn hình (page/route) — dùng **Navigator** (một stack các route) cho navigation cơ bản, hoặc các package routing khai báo cho ứng dụng phức tạp hơn. Hiểu navigation là thiết yếu để xây dựng ứng dụng nhiều màn hình.

## Navigation cơ bản với Navigator (một stack)

```dart
// Navigator quản lý một STACK các route (màn hình)
// PUSH một màn hình mới lên stack (điều hướng tới nó)
Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => SecondScreen()),
);

// POP — quay lại (gỡ màn hình trên cùng, trở về màn hình trước)
Navigator.pop(context);
```

```text
Hãy nghĩ navigation như một STACK các màn hình:
  → PUSH thêm một màn hình lên trên (điều hướng tiến)
  → POP gỡ màn hình trên cùng (quay lại)
  → nút back / cử chỉ cũng pop
```

## Truyền dữ liệu giữa các màn hình

```dart
// truyền dữ liệu tiến (qua constructor)
Navigator.push(context, MaterialPageRoute(
  builder: (context) => DetailScreen(itemId: 42),
));

// trả dữ liệu lại khi pop
Navigator.pop(context, result);          // trả về một kết quả
final result = await Navigator.push(...); // nhận nó (push trả về một Future)
```

## Named route và routing hiện đại

```dart
// NAMED route — định nghĩa route theo tên (gọn hơn cho nhiều màn hình)
Navigator.pushNamed(context, '/details');
// được cấu hình trong MaterialApp(routes: {...})

// HIỆN ĐẠI: các package routing khai báo (go_router) cho ứng dụng phức tạp:
//   → routing dựa trên URL, deep linking, hỗ trợ web, navigation lồng nhau
//   → go_router là cách tiếp cận được khuyến nghị cho ứng dụng không tầm thường
```

## Tại sao điều này quan trọng

Hiểu navigation là thiết yếu vì **hầu hết ứng dụng có nhiều màn hình**, và di chuyển giữa chúng là nền tảng cho chức năng ứng dụng, nên đây là kiến thức Flutter bắt buộc phải biết.

Khái niệm cốt lõi — **Navigator của Flutter quản lý một stack các route** (màn hình), nơi bạn **push** để điều hướng tiến (thêm một màn hình lên trên) và **pop** để quay lại (gỡ màn hình trên cùng) — là mô hình tư duy nền tảng cho navigation, và ẩn dụ stack (khớp với cách người dùng điều hướng tiến và lùi qua một ứng dụng) khiến nó trực quan.

Hiểu **navigation cơ bản** (push/pop) là cần thiết cho bất kỳ ứng dụng nhiều màn hình nào.

Hiểu **truyền dữ liệu giữa các màn hình** (gửi dữ liệu tiến qua constructor và trả kết quả khi pop, vì push trả về một Future) là thiết yếu vì các màn hình thường cần chia sẻ dữ liệu (truyền một item tới màn hình chi tiết, trả về một lựa chọn).

Hiểu **named route** (định nghĩa route theo tên để tổ chức gọn hơn với nhiều màn hình) và đặc biệt là **routing khai báo hiện đại** (các package như **go_router**, được khuyến nghị cho ứng dụng không tầm thường, cung cấp routing dựa trên URL, deep linking, hỗ trợ web và navigation lồng nhau) phản ánh thực hành tốt hiện nay — khi ứng dụng phát triển, routing khai báo xử lý độ phức tạp tốt hơn push/pop mệnh lệnh.

Vì hầu như tất cả ứng dụng đều có nhiều màn hình và điều hướng giữa chúng (với truyền dữ liệu) là nền tảng cho chức năng ứng dụng, và vì hiểu mô hình stack Navigator, truyền dữ liệu, và routing hiện đại (go_router) là cần thiết để xây dựng ứng dụng nhiều màn hình, hiểu navigation trong Flutter là kiến thức nền tảng thiết yếu — một năng lực cốt lõi cần trong gần như mọi ứng dụng Flutter và cần thiết để xây dựng các trải nghiệm nhiều màn hình mà ứng dụng thực tế đòi hỏi.