Hari 6: Navigasi Antar Halaman di Flutter

Fri, May 2025 14:32:35

Halo teman-teman, kembali lagi bareng saya di seri belajar Flutter dari nol sampai mahir. Di hari ke-6 ini kita bakal bahas salah satu topik yang cukup penting dan sering banget digunakan dalam pengembangan aplikasi Flutter, yaitu navigasi antar halaman.

Kita bakal pelajari cara menggunakan Navigator.push(), Navigator.pop(), konsep MaterialPageRoute, serta bagaimana cara membuat dan menambahkan halaman baru seperti halaman Register, About, dan sebagainya.

Kenapa Navigasi itu Penting?

Dalam aplikasi mobile, kita hampir selalu berpindah dari satu halaman ke halaman lain. Contohnya:

• Dari halaman Login ke halaman Home.
• Dari halaman Home ke halaman Detail.
• Dari halaman Setting ke halaman About.

Nah, navigasi inilah yang memungkinkan kita untuk membuat aplikasi yang kompleks tapi tetap terstruktur.

Flutter menyediakan sebuah sistem navigasi berbasis stack (tumpukan). Jadi, saat kita berpindah halaman, halaman baru akan ditumpuk di atas halaman sebelumnya. Saat kita menekan tombol back, halaman yang paling atas akan di-pop (dihapus dari tumpukan).

Konsep Navigator

Flutter punya class bernama Navigator yang bisa kita gunakan untuk berpindah antar halaman.

1. Navigator.push()

Digunakan untuk pindah ke halaman baru (menambahkan halaman ke stack).

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

2. Navigator.pop()

Digunakan untuk kembali ke halaman sebelumnya (menghapus halaman dari stack).

Navigator.pop(context);

3. MaterialPageRoute

Merupakan class yang digunakan untuk mendefinisikan rute (route) baru berbasis desain Material Design.

Contoh Kasus: Halaman Utama ke Halaman Register dan About

Kita akan buat struktur sederhana berikut:

main.dart
├── HomePage
├── RegisterPage
└── AboutPage

Langkah 1: Buat HomePage

// home_page.dart
import 'package:flutter/material.dart';
import 'register_page.dart';
import 'about_page.dart';

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Beranda')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => RegisterPage()),
                );
              },
              child: Text('Ke Halaman Register'),
            ),
            ElevatedButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => AboutPage()),
                );
              },
              child: Text('Ke Halaman About'),
            ),
          ],
        ),
      ),
    );
  }
}

Langkah 2: Buat RegisterPage

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

class RegisterPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Register')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('Kembali'),
        ),
      ),
    );
  }
}

Langkah 3: Buat AboutPage

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

class AboutPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Tentang Aplikasi')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('Aplikasi ini dibuat dengan Flutter.'),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                Navigator.pop(context);
              },
              child: Text('Kembali'),
            ),
          ],
        ),
      ),
    );
  }
}

Penjelasan Lebih Dalam

Kenapa Pakai MaterialPageRoute?

Karena ini adalah cara paling umum dan direkomendasikan untuk aplikasi berbasis Material Design. Jika kamu ingin membuat transisi custom atau pakai Cupertino (gaya iOS), kamu bisa pakai CupertinoPageRoute atau membuat PageRouteBuilder.

Navigasi dengan Named Route (Bonus)

Kalau aplikasi kamu makin besar, kamu bisa mempertimbangkan pakai Named Route supaya navigasi lebih terstruktur dan maintainable.

MaterialApp(
  initialRoute: '/',
  routes: {
    '/': (context) => HomePage(),
    '/register': (context) => RegisterPage(),
    '/about': (context) => AboutPage(),
  },
);

Dan kamu bisa navigasi seperti ini:

Navigator.pushNamed(context, '/register');
Navigator.pushNamed(context, '/about');

Kesimpulan

Navigasi adalah bagian yang sangat penting dalam pengembangan aplikasi Flutter. Dengan memahami Navigator, MaterialPageRoute, dan push/pop, kamu sudah bisa membuat aplikasi dengan banyak halaman.

Yang penting kamu pahami adalah:

• Setiap push() menambahkan halaman ke stack.
• Setiap pop() menghapus halaman dari stack.
• Gunakan MaterialPageRoute untuk transisi halaman yang smooth.
• Pertimbangkan pakai Named Route untuk aplikasi besar.

Latihan Mandiri

1. Tambahkan halaman baru bernama ProfilePage.
2. Buat tombol di HomePage untuk menuju ke ProfilePage.
3. Tambahkan informasi nama dan email di ProfilePage.
4. Tambahkan tombol kembali ke Home.

Sampai di sini dulu pembahasan hari ke-6. Di hari berikutnya kita akan belajar tentang State Management dasar agar aplikasi kita makin interaktif dan dinamis.

Tetap semangat ya, sampai ketemu di materi selanjutnya! 💪🔥