flutter navigasi routing

📚 Seri Belajar Dart · Artikel 13 dari 16

Navigasi & Routing —
Pindah Halaman di Aplikasi Flutter

Pahami cara kerja Navigator, named routes, dan route arguments — fondasi penting agar aplikasi Flutter kamu bisa berpindah halaman dengan mulus.

#Flutter #Navigation #Routing #DartFromZeroToZorro

⏱️ Estimasi baca: 12 menit

🎯 Level: Lanjut

📅 Tahun: 2026

Pernah pakai aplikasi e-commerce, lalu klik tombol "Lihat Detail" dan… layar langsung berpindah ke halaman produk tanpa reload? Itulah sihir navigasi routing Flutter bekerja. Kalau kamu sudah bisa bikin satu halaman cantik di Flutter tapi bingung cara menghubungkannya ke halaman lain, kamu ada di tempat yang tepat. Artikel ke-13 dari seri Dart from Zero to Zorro ini akan membedah tuntas cara pindah halaman di Flutter — dari yang paling sederhana sampai yang pakai named routes dan argumen antara halaman.

🗺️ Apa Itu Navigasi Routing Flutter? (Analogi Lift Gedung)

Bayangkan kamu ada di lobby sebuah gedung pencakar langit. Setiap lantai adalah sebuah halaman (screen) di aplikasi Flutter kamu. Nah, Navigator di Flutter itu persis seperti lift — dia yang mengantarkan kamu dari lantai satu ke lantai lainnya, dan bisa membawamu kembali ke lantai sebelumnya hanya dengan menekan tombol "kembali".

Dalam Flutter, sistem navigasi menggunakan konsep stack (tumpukan). Halaman baru di-push ke atas tumpukan saat kamu buka, dan di-pop saat kamu tekan tombol back. Sama persis kayak tumpukan piring — yang terakhir masuk, yang pertama keluar.

📐 KONSEP INTI

Navigator.push() → Tambah halaman baru ke stack
Navigator.pop() → Hapus halaman teratas dari stack
Named Routes → Navigasi pakai nama jalan, bukan kelas langsung

Flutter menggunakan MaterialPageRoute sebagai "kendaraan" untuk membungkus widget halaman sebelum di-push ke Navigator.

🔥

FAKTA MENARIK

Flutter memiliki dua generasi sistem navigasi: Navigator 1.0 (imperatif, berbasis push/pop) dan Navigator 2.0 alias Router API (deklaratif, cocok untuk deep linking & web). Untuk pemula, Navigator 1.0 sudah lebih dari cukup!

🚀 Cara Kerja Navigasi Routing Flutter — Step by Step

Oke, sekarang kita praktek. Kita akan buat dua halaman: HomePage dan DetailPage. Kamu akan belajar cara berpindah dari satu ke yang lain dan kembali lagi.

1

Buat dua file halaman terpisah

Buatlah home_page.dart dan detail_page.dart di folder lib/. Pisahkan setiap halaman ke file berbeda agar kode lebih rapi dan mudah dikelola.

2

Tulis kode HomePage dengan tombol navigasi

home_page.dart

import 'package:flutter/material.dart';
import 'detail_page.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Halaman Utama'),
        backgroundColor: Colors.indigo,
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // Push: pindah ke halaman detail
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => const DetailPage(),
              ),
            );
          },
          child: const Text('Pergi ke Halaman Detail'),
        ),
      ),
    );
  }
}

3

Buat DetailPage dengan tombol kembali

detail_page.dart

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Halaman Detail'),
        backgroundColor: Colors.deepPurple,
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text(
              'Kamu berhasil pindah halaman! 🎉',
              style: TextStyle(fontSize: 18),
            ),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                // Pop: kembali ke halaman sebelumnya
                Navigator.pop(context);
              },
              child: const Text('Kembali'),
            ),
          ],
        ),
      ),
    );
  }
}

💡

TIPS PENTING

Kamu tidak perlu menambahkan tombol "Kembali" secara manual! AppBar di Flutter secara otomatis menampilkan arrow kembali ketika ada halaman di bawah stack. Tombol manual berguna saat kamu ingin kembali dari widget yang bukan AppBar, atau meneruskan data saat pop.

4

Daftarkan HomePage di main.dart

Pastikan home: di MaterialApp menunjuk ke HomePage(), lalu jalankan aplikasi. Boom — navigasi dasar kamu sudah jalan!

🏷️ Named Routes — Navigasi Routing Flutter Pakai Nama Jalan

Kalau aplikasi kamu makin besar dan punya 10+ halaman, nulis MaterialPageRoute(builder: ...) di mana-mana bisa jadi mimpi buruk. Solusinya: Named Routes. Analoginya seperti GPS — daripada kamu hafal koordinat latitude-longitude setiap tujuan, kamu cukup ketik nama tempatnya.

main.dart — Named Routes

// main.dart
MaterialApp(
  title: 'App Routing',
  initialRoute: '/',           // Halaman awal
  routes: {
    '/': (context) => const HomePage(),
    '/detail': (context) => const DetailPage(),
    '/profile': (context) => const ProfilePage(),
  },
)

// Cara memanggil dari manapun:
Navigator.pushNamed(context, '/detail');

// Cara kembali tetap sama:
Navigator.pop(context);

⚡

INSIGHT PENTING

Named Routes membuat kode lebih maintainable: cukup ubah satu entry di routes, semua navigasi yang merujuk ke nama itu otomatis ikut berubah. Ini best practice untuk project skala menengah ke atas.

📦 Kirim Data Antar Halaman dengan Route Arguments

Navigasi tanpa data itu seperti kurir yang datang tanpa paket. Di dunia nyata, kamu pasti mau kirim informasi ke halaman berikutnya — misalnya ID produk, nama pengguna, atau data dari list yang diklik. Flutter menyediakan dua cara utama:

🔍 PERBANDINGAN METODE KIRIM DATA

Via Constructor

Kirim data langsung lewat parameter saat membuat widget. Paling simpel, type-safe, cocok untuk navigasi langsung (push biasa).

Navigator.push(...DetailPage(id: 42))

Via Arguments

Kirim data lewat parameter arguments di pushNamed. Cocok untuk named routes, bisa berupa Map atau model data.

pushNamed('/detail', arguments: {'id': 42})

Kirim data via Constructor

// ── Di HomePage: kirim data ──────────────────────────
Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => DetailPage(
      productName: 'Kopi Arabika Premium',
      productId: 101,
    ),
  ),
);

// ── Di DetailPage: terima data ───────────────────────
class DetailPage extends StatelessWidget {
  final String productName;
  final int productId;

  const DetailPage({
    super.key,
    required this.productName,
    required this.productId,
  });

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(productName)),
      body: Center(
        child: Text('ID Produk: $productId'),
      ),
    );
  }
}

⚠️

PERHATIAN

Saat menggunakan arguments via named routes, data yang diterima bertipe dynamic — kamu harus melakukan casting manual, misalnya ModalRoute.of(context)!.settings.arguments as Map. Selalu tambahkan null check untuk menghindari crash!

📊 Tabel Referensi: Metode Navigasi Routing Flutter

Method	Fungsi	Kapan Dipakai	Stack
push()	Buka halaman baru di atas stack	Navigasi forward biasa	Tambah
pop()	Tutup halaman teratas	Tombol kembali / selesai	Hapus
pushNamed()	Buka halaman via nama route	Named Routes setup	Tambah
pushReplacement()	Ganti halaman saat ini	Setelah login berhasil	Ganti
pushAndRemoveUntil()	Buka halaman & hapus stack lama	Logout / reset ke home	Reset

💡

TIPS: KAPAN PAKAI pushAndRemoveUntil?

Bayangkan user sudah login dan ada di halaman profil. Saat mereka logout, kamu tidak mau mereka bisa kembali ke halaman profil dengan tombol back. Gunakan pushAndRemoveUntil untuk membersihkan seluruh stack dan mulai dari login screen yang bersih.

✅ KESIMPULAN — ARTIKEL 13

Kamu Sekarang Bisa Navigasi di Flutter!

Di artikel ke-13 seri Dart from Zero to Zorro ini, kamu sudah belajar:

• ▸ Konsep Navigator stack — push & pop seperti tumpukan piring
• ▸ Cara pindah halaman dengan Navigator.push() dan MaterialPageRoute
• ▸ Sistem Named Routes untuk project yang lebih besar
• ▸ Cara kirim data antar halaman via constructor maupun arguments
• ▸ Tabel referensi metode navigasi routing Flutter dari push sampai pushAndRemoveUntil

Artikel selanjutnya kita akan masuk ke topik yang lebih seru: konsumsi REST API dan menyimpan data lokal — dua skill yang WAJIB dimiliki untuk bikin aplikasi yang benar-benar berguna.

💬 Pertanyaan? Tulis di kolom komentar, kita diskusi bareng!

🔁 Bantu teman yang lagi belajar Flutter dengan share artikel ini!

#BelajarDart #DartFromZeroToZorro #Flutter #NavigasiFlutter #RoutingFlutter #Navigator #MobileDevelopment

📚

SERI LENGKAP

Dart from Zero to Zorro

Artikel ini adalah bagian dari seri 16 Artikel Belajar Dart — dari konsep dasar hingga membangun aplikasi Flutter yang lengkap.

Lihat Daftar Isi Lengkap →

← Artikel Sebelumnya

Artikel 12

State Management Sederhana — setState dan Interaksi di Flutter

Baca Artikel ←

Artikel Selanjutnya →

Artikel 14

Konsumsi REST API & Simpan Data Lokal di Flutter

Baca Artikel →

Bagian dari seri Dart from Zero to Zorro · 16 Artikel Belajar Dart untuk Pemula