🚀 Navigation cơ bản

1. Navigator là gì?

Flutter sử dụng Navigator để quản lý stack các routes (screens):

┌─────────────┐
│  Screen C   │  ← Top of stack (visible)
├─────────────┤
│  Screen B   │
├─────────────┤
│  Screen A   │  ← Bottom of stack
└─────────────┘

---

2. Navigator.push

Thêm screen mới lên stack:

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

Shorthand:

Navigator.of(context).push(
  MaterialPageRoute(builder: (_) => SecondScreen()),
);

---

3. Navigator.pop

Quay lại screen trước:

Navigator.pop(context);

Hoặc:

Navigator.of(context).pop();

---

4. Ví dụ đầy đủ

Screen 1

class FirstScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('First Screen')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (_) => SecondScreen()),
            );
          },
          child: Text('Go to Second'),
        ),
      ),
    );
  }
}

Screen 2

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Second Screen')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('Go Back'),
        ),
      ),
    );
  }
}

---

5. pushReplacement

Thay thế screen hiện tại (không thể back):

Navigator.pushReplacement(
  context,
  MaterialPageRoute(builder: (_) => HomeScreen()),
);

Use case: Sau khi login, replace LoginScreen bằng HomeScreen.

---

6. pushAndRemoveUntil

Push screen mới và xóa các screens trước đó:

// Xóa tất cả và push Home
Navigator.pushAndRemoveUntil(
  context,
  MaterialPageRoute(builder: (_) => HomeScreen()),
  (route) => false,  // Xóa tất cả
);

// Xóa đến khi gặp route có tên '/home'
Navigator.pushAndRemoveUntil(
  context,
  MaterialPageRoute(builder: (_) => ProfileScreen()),
  ModalRoute.withName('/home'),
);

Use case: Logout - clear stack và về LoginScreen.

---

7. popUntil

Pop về screen cụ thể:

// Pop về screen đầu tiên
Navigator.popUntil(context, (route) => route.isFirst);

// Pop về named route
Navigator.popUntil(context, ModalRoute.withName('/home'));

---

8. canPop và maybePop

Kiểm tra có thể pop không:

if (Navigator.canPop(context)) {
  Navigator.pop(context);
}

// Hoặc
Navigator.maybePop(context);  // Pop nếu có thể

---

9. WillPopScope - Handle back button

WillPopScope(
  onWillPop: () async {
    // Return true để pop, false để không
    final shouldPop = await showDialog<bool>(
      context: context,
      builder: (context) => AlertDialog(
        title: Text('Exit?'),
        actions: [
          TextButton(
            onPressed: () => Navigator.pop(context, false),
            child: Text('No'),
          ),
          TextButton(
            onPressed: () => Navigator.pop(context, true),
            child: Text('Yes'),
          ),
        ],
      ),
    );
    return shouldPop ?? false;
  },
  child: Scaffold(...),
)

Flutter 3.12+: Dùng PopScope thay cho WillPopScope

PopScope(
  canPop: false,
  onPopInvoked: (didPop) async {
    if (didPop) return;
    // Show confirmation dialog
  },
  child: Scaffold(...),
)

---

10. PageRouteBuilder - Custom Transition

Navigator.push(
  context,
  PageRouteBuilder(
    pageBuilder: (context, animation, secondaryAnimation) => SecondScreen(),
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
      // Fade transition
      return FadeTransition(opacity: animation, child: child);

      // Slide transition
      // return SlideTransition(
      //   position: Tween<Offset>(
      //     begin: Offset(1.0, 0.0),
      //     end: Offset.zero,
      //   ).animate(animation),
      //   child: child,
      // );
    },
  ),
);

---

📝 Tóm tắt

Method	Mô tả
push	Thêm screen vào stack
pop	Quay lại screen trước
pushReplacement	Thay thế screen hiện tại
pushAndRemoveUntil	Push và xóa các screens
popUntil	Pop về screen cụ thể
canPop	Kiểm tra có thể pop
maybePop	Pop nếu có thể