Hari 20: Navigation & Routing

Navigation di Flutter

Flutter menggunakan Navigator untuk berpindah antar halaman (Routes). Seperti stack — push untuk buka halaman baru, pop untuk kembali.

import "package:flutter/material.dart";

// Halaman Utama
class HalamanUtama extends StatelessWidget {
  @override Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Home")),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () => Navigator.push(context,
                MaterialPageRoute(builder: (_) => HalamanDetail(nama: "Budi"))),
              child: Text("Ke Halaman Detail"),
            ),
            ElevatedButton(
              onPressed: () async {
                final result = await Navigator.push(context,
                  MaterialPageRoute(builder: (_) => HalamanForm()));
                if (result != null) print("Dapat data: $result");
              },
              child: Text("Ke Form (tunggu hasil)"),
            ),
          ],
        ),
      ),
    );
  }
}

// Halaman Detail dengan parameter
class HalamanDetail extends StatelessWidget {
  final String nama;
  const HalamanDetail({required this.nama, super.key});
  @override Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Detail")),
      body: Center(child: Text("Halo, $nama!")),
    );
  }
}

Named Routes

MaterialApp(
  initialRoute: "/",
  routes: {
    "/": (ctx) => HalamanUtama(),
    "/detail": (ctx) => HalamanDetail(nama: ""),
    "/form": (ctx) => HalamanForm(),
  },
)

// Navigasi
Navigator.pushNamed(context, "/detail");
Navigator.pushReplacementNamed(context, "/home");