Bài 8. Điều hướng nhiều màn hình

Khái niệm và lý thuyết

Navigator quản lý màn hình như một ngăn xếp: push đặt màn hình mới lên trên, pop quay lại màn hình trước và có thể trả kết quả. Cách này đơn giản, phù hợp ứng dụng nhỏ.

Với ứng dụng có web, deep link hoặc nhiều tab, nên dùng định tuyến khai báo bằng gói go_router (do đội Flutter duy trì): mỗi màn hình gắn với một đường dẫn như /khoa-hoc/12, nút Back của trình duyệt và Android hoạt động đúng.

Navigator cơ bản

// Mở màn hình chi tiết, chờ kết quả
final daMua = await Navigator.push<bool>(
  context,
  MaterialPageRoute(builder: (_) => ChiTiet(id: 12)),
);
// Trong ChiTiet: trả kết quả và quay lại
Navigator.pop(context, true);

go_router

flutter pub add go_router

final router = GoRouter(routes: [
  GoRoute(path: '/', builder: (c, s) => const TrangChu(), routes: [
    GoRoute(path: 'khoa-hoc/:id',
      builder: (c, s) => ChiTiet(id: int.parse(s.pathParameters['id']!))),
  ]),
]);
// main: MaterialApp.router(routerConfig: router)
// Chuyển trang: context.go('/khoa-hoc/12');  quay lại: context.pop();

Thanh điều hướng dưới

int _tab = 0;
Scaffold(
  body: [const TrangChu(), const KhoaHoc(), const CaNhan()][_tab],
  bottomNavigationBar: NavigationBar(
    selectedIndex: _tab,
    onDestinationSelected: (i) => setState(() => _tab = i),
    destinations: const [
      NavigationDestination(icon: Icon(Icons.home), label: 'Trang chủ'),
      NavigationDestination(icon: Icon(Icons.book), label: 'Khóa học'),
      NavigationDestination(icon: Icon(Icons.person), label: 'Cá nhân'),
    ],
  ),
);

Với go_router, dùng StatefulShellRoute để mỗi tab giữ ngăn xếp riêng.