พื้นฐาน Navigator

ใน React คุณเรียก useNavigate() เพื่อรับฟังก์ชัน navigate แล้วเรียก navigate('/detail') เพื่อเปลี่ยน route ปัจจุบัน สิ่งที่เทียบเท่ากันใน Flutter คือ Navigator.push(context, route) — แต่แทนที่จะเป็น URL string คุณส่ง Route object ที่รู้วิธีสร้างหน้าจอถัดไป ความแตกต่างหลักคือ Flutter รักษา widget stack จริง ๆ: หน้าจอก่อนหน้ายังคงมีชีวิตอยู่ในหน่วยความจำใต้อันใหม่ เหมือนกับที่ browser history เก็บหน้าก่อนหน้าไว้ใน session ของแท็บ

ปุ่มย้อนกลับ Android และ gesture swipe-back ของ iOS ถูกจัดการโดยอัตโนมัติโดย Navigator — คุณไม่จำเป็นต้องเชื่อมต่อ back handler เว้นแต่ต้องการ intercept เอง

การเปรียบเทียบแบบ side-by-side

// React — navigate programmatically
import { useNavigate } from 'react-router-dom';

function HomeScreen() {
  const navigate = useNavigate();

  return (
    <button onClick={() => navigate('/detail')}>
      Go to Detail
    </button>
  );
}

// Go back
function DetailScreen() {
  const navigate = useNavigate();
  return (
    <button onClick={() => navigate(-1)}>
      Back
    </button>
  );
}

// Flutter — push / pop
class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () {
        Navigator.push(
          context,
          MaterialPageRoute(
            builder: (context) => const DetailScreen(),
          ),
        );
      },
      child: const Text('Go to Detail'),
    );
  }
}

// Go back
class DetailScreen extends StatelessWidget {
  const DetailScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () => Navigator.pop(context),
      child: const Text('Back'),
    );
  }
}

🔀 useNavigate / history.push → Navigator.push

ต้องมี Context. Navigator.push เป็น static method ที่รับ BuildContext Flutter resolve Navigator ancestor ที่ใกล้ที่สุดจาก context นั้น — คล้ายกับที่ hooks ของ react-router resolve Router ที่ใกล้ที่สุดผ่าน React context
โมเดล Stack ไม่ใช่ URL. Navigator.push เพิ่ม entry ใหม่เข้า in-memory stack จริง ๆ ไม่มีการเปลี่ยน URL บนมือถือ (แม้ Flutter Web จะอัปเดต browser URL)
MaterialPageRoute คือ route object. route object นี้ wrap builder function และให้ transition animation ที่เหมาะสมกับ platform (slide บน iOS, fade บน Android) React Router ไม่มีสิ่งที่เทียบตรงกันเพราะเลื่อน transition ให้กับ CSS
Navigator.pop vs navigate(-1). pop ลบ entry บนสุดออกจาก Flutter stack navigate(-1) ย้อนกลับใน browser history ทั้งคู่ทำให้ “กลับ” ได้ แต่ pop เป็น synchronous และไม่ตรวจสอบ URL
Back gesture ได้มาฟรี. Navigator เชื่อมต่อปุ่มย้อนกลับ Android และ edge-swipe ของ iOS โดยอัตโนมัติ ใน react-router คุณต้องจัดการ history.block หรือ useBeforeUnload เอง

ตัวอย่างที่รันได้

Flutter / DartOpen in DartPad ↗ (copies code)

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(
      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: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            const Text(
              'You are on the Home screen.',
              style: TextStyle(fontSize: 16),
            ),
            const SizedBox(height: 24),
            ElevatedButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) => const DetailScreen(),
                  ),
                );
              },
              child: const Text('Go to Detail'),
            ),
          ],
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Detail')),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            const Text(
              'You are on the Detail screen.',
              style: TextStyle(fontSize: 16),
            ),
            const SizedBox(height: 24),
            ElevatedButton(
              onPressed: () => Navigator.pop(context),
              child: const Text('Go Back'),
            ),
          ],
        ),
      ),
    );
  }
}