Navigasi Pemula: Cara Berpindah dari Halaman Satu ke Halaman Lain

Pada aplikasi seluler, jarang sekali seluruh informasi ditumpuk dalam satu layar. Pengguna terbiasa berpindah dari daftar produk ke detail produk, atau dari halaman beranda ke halaman profil.

Artikel ini membahas cara kerja sistem Navigasi di Flutter menggunakan kelas Navigator serta metode utamanya: Navigator.push dan Navigator.pop.

Konsep Tumpukan (Stack) di Flutter

Flutter mengelola layar aplikasi menggunakan struktur data Stack (Tumpukan). Konsep ini mirip dengan tumpukan piring di meja:

Layar yang sedang dilihat pengguna berada di posisi paling atas tumpukan.
Saat membuka layar baru, Anda menumpuknya di atas layar lama.
Saat menutup layar, Anda mengambil layar paling atas sehingga layar di bawahnya kembali terlihat.

 [ Layar 2 (Detail) ]  <-- Terlihat di layar (Atas Stack)
 --------------------
 [ Layar 1 (Beranda) ] <-- Tersembunyi di bawahnya

Dua Metode Utama Navigator

Navigator.push()

Digunakan untuk membuka halaman baru (menambahkan layar ke atas tumpukan).
Navigator.pop()

Digunakan untuk kembali ke halaman sebelumnya (menghapus layar teratas dari tumpukan).

Tutorial Langkah demi Langkah

Mari buat contoh sederhana: dua halaman terpisah yang saling terhubung melalui tombol navigasi.

Kode Lengkap Navigasi

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

void main() {
  runApp(const MaterialApp(
    home: HalamanUtama(),
  ));
}

// ==========================================
// 1. HALAMAN UTAMA
// ==========================================
class HalamanUtama extends StatelessWidget {
  const HalamanUtama({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Halaman Utama'),
        backgroundColor: Colors.teal,
        foregroundColor: Colors.white,
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text(
              'Ini adalah Layar Pertama',
              style: TextStyle(fontSize: 18),
            ),
            const SizedBox(height: 20),
            ElevatedButton.icon(
              onPressed: () {
                // Berpindah ke Halaman Detail
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) => const HalamanDetail(),
                  ),
                );
              },
              icon: const Icon(Icons.arrow_forward),
              label: const Text('Buka Halaman Detail'),
              style: ElevatedButton.styleFrom(
                backgroundColor: Colors.teal,
                foregroundColor: Colors.white,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

// ==========================================
// 2. HALAMAN DETAIL
// ==========================================
class HalamanDetail extends StatelessWidget {
  const HalamanDetail({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Halaman Detail'),
        backgroundColor: Colors.tealDark,
        foregroundColor: Colors.white,
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text(
              'Ini adalah Layar Kedua',
              style: TextStyle(fontSize: 18),
            ),
            const SizedBox(height: 20),
            OutlinedButton.icon(
              onPressed: () {
                // Kembali ke Halaman Utama
                Navigator.pop(context);
              },
              icon: const Icon(Icons.arrow_back),
              label: const Text('Kembali'),
            ),
          ],
        ),
      ),
    );
  }
}

Bedah Jalurnya Kode

Peran MaterialPageRoute

Saat memanggil Navigator.push, Anda membungkus widget halaman tujuan dengan MaterialPageRoute. Komponen ini bertugas menangani animasi transisi layar secara otomatis (misalnya animasi slide dari bawah pada iOS atau slide dari samping pada Android).
Mekanisme Navigator.pop(context)

Fungsi ini tidak memerlukan parameter halaman tujuan. Flutter secara otomatis menghapus layar aktif saat ini dan menampilkan layar yang tepat berada di bawahnya pada tumpukan.

Navigasi Pemula: Cara Berpindah dari Halaman Satu ke Halaman Lain