Navigation & Routing : Multiple Screen

Card image

Teori

Navigation dan Routing Flutter

Navigation (Navigasi) adalah proses berpindah dari satu halaman (screen/page) ke halaman lain dalam sebuah aplikasi Flutter. Contohnya adalah perpindahan dari halaman produk ke halaman detail produk.

Navigasi di Flutter menggunakan widget Navigator yang bekerja dengan konsep tumpukan (stack).

Konsep Dasar Tumpukan (Stack) Navigasi

Dalam konsep tumpukan (stack) navigasi:

  1. Halaman awal aplikasi akan berada di posisi dasar tumpukan, misalnya halaman Product.

  2. Ketika berpindah ke halaman baru (misalnya ke Detail Product), Flutter menggunakan perintah push (Navigator.push()). Halaman baru akan ditempatkan di atas tumpukan halaman sebelumnya.

  3. Ketika tombol kembali ditekan pada halaman baru, Flutter menggunakan perintah pop (Navigator.pop()). Halaman saat ini (misalnya Detail Product) akan dikeluarkan dari tumpukan, dan halaman sebelumnya (Product) akan muncul kembali.

Routing

Routing (Rute) adalah sistem yang digunakan untuk mendefinisikan dan mengelola rute (routes) dalam aplikasi. Setiap rute didefinisikan, sehingga untuk memanggil halaman cukup dengan memanggil nama rute tersebut, yang mempermudah pengelolaan tanpa perlu membuat instance baru setiap kali memanggil halaman.

Jenis Routing pada Flutter

1. Navigator (Anonymous Routes)

Widget Navigator menampilkan halaman dengan konsep tumpukan, menggunakan animasi transisi saat berpindah. Perpindahan diakses melalui BuildContext dengan memanggil metode seperti push() atau pop() secara langsung.

  • Push(): Menambahkan halaman baru ke tumpukan. 
    
                        Navigator.push(
                            context,
                            MaterialPageRoute (builder: (context) => const ProductDetail()),
                        );
  • Pop(): Kembali ke halaman sebelumnya (mengeluarkan halaman dari tumpukan).
    Navigator.pop(context);

2. Named Routes (Rute Bernama)

Rute dikelola dan didefinisikan pada widget MaterialApp atau CupertinoApp, lalu dipanggil berdasarkan nama yang telah diberikan.

  • Definisi Routes: 
    
                    return MaterialApp(
                        initialRoute: '/',
                        routes: {
                            '/': (context) => const Product(),
                            '/product_detail': (context) => const ProductDetail(),
                        },
                    );
  • Penggunaan: 
    Navigator.pushNamed (context, '/product_detail');

3. Generated Routes

Mekanisme untuk mengelola rute dengan mengirimkan parameter dan melakukan penanganan kesalahan (handle error). Rute ditentukan melalui properti onGenerateRoute di MaterialApp.

4. Router / Navigator 2.0

Mekanisme pengelolaan rute untuk aplikasi yang membutuhkan rute yang kompleks, biasanya digunakan saat membuat aplikasi web pada Flutter.

Jenis Method Navigation Lainnya

Selain push dan pop, terdapat beberapa metode navigasi lainnya:

  • Push Replacement: Mengganti halaman saat ini dengan halaman baru. Halaman saat ini akan dihapus dari tumpukan.
  • Push and Remove Until: Menambahkan halaman baru dan menghapus semua halaman sebelumnya dalam tumpukan hingga kondisi tertentu terpenuhi. Misalnya, menghapus semua halaman sebelumnya ((route) => false).

Mengirim dan Menerima Data Antar Halaman

Mengirim Data

Data dapat dikirimkan ke halaman tujuan melalui:

  • Dengan Constructor: Mengirimkan data saat membuat instance halaman tujuan. 
    
                        Navigator.push(
                            context,
                            MaterialPageRoute(
                                builder: (context) => DetailPage (id: 123, name: Muhammad Hafiz),
                            ),
                        );
  • Dengan Named Routes dan Arguments: Mengirimkan data dalam bentuk map melalui properti arguments. 
    
                    Navigator.pushNamed(
                        context,
                        '/detail',
                        arguments: {'id': 123, 'name': 'Muhammad Hafiz'},
                    );

Menerima Data

Data dapat diterima di halaman tujuan melalui:

  • Menerima Data dengan Constructor: Data diterima melalui parameter konstruktor widget halaman tujuan. 
    
                    class DetailPage extends StatelessWidget {
                        final int id;
                        final String name;
                        DetailPage({required this.id, required this.name});
                        // ... gunakan id dan name di method build
                    }
  • Menerima Data menggunakan ModalRoute.of(context): Data diambil dari settings.arguments yang merupakan bagian dari route saat menggunakan Named Routes.
    final args = ModalRoute.of(context)!.settings.arguments as Map;

Contoh Penerapan Navigation Widget (Bottom Navigation Bar)

Beberapa widget Flutter telah menggunakan konsep navigasi dan routing, seperti Tabs, Bottom Navigation Bar, dan Drawer.

Bottom Navigation Bar adalah widget yang terdapat di bagian bawah aplikasi, digunakan untuk berpindah antar halaman utama yang berbeda. Biasanya terdiri dari tiga hingga lima item (ikon dan teks) yang mewakili tujuan/destinasi yang berbeda. Ketika salah satu item diklik, aplikasi akan menampilkan halaman yang sesuai.

Contoh penerapan umumnya melibatkan penggunaan Scaffold dengan properti bottomNavigationBar. Saat item diklik, fungsi onTap akan dipanggil untuk memperbarui indeks halaman saat ini, dan setState digunakan untuk menampilkan widget halaman yang sesuai di properti body dari Scaffold.


                    class MyNavigationScreen extends StatefulWidget {
                        // ...
                        }
                        class _MyNavigationScreenState extends State<MyNavigationScreen> {
                        int _selectedIndex = 0; // State untuk indeks item yang aktif
                        final list<Widget> _screens = [HomePage(), SettingsPage(), ProfilePage()]; // Daftar halaman

                        void _onItemTapped(int index) {
                            setState(() {
                            _selectedIndex = index;
                            });
                        }

                        @override
                        Widget build(BuildContext context) {
                            return Scaffold(
                            body: _screens[_selectedIndex], // Menampilkan halaman sesuai indeks
                            bottomNavigationBar: BottomNavigationBar(
                                items: const <BottomNavigationBarItem>[
                                BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
                                BottomNavigationBarItem(icon: Icon(Icons.settings), label: 'Settings'),
                                BottomNavigationBarItem(icon: Icon(Icons.person), label: 'Profile'),
                                ],
                                currentIndex: _selectedIndex,
                                onTap: _onItemTapped, // Memanggil fungsi saat item diklik
                            ),
                            );
                        }
                    }

Langkah Langkah Praktikum

Multiple Screen (Named Routes)

Konsep Named Routes (Rute Bernama) digunakan untuk mengelola navigasi antar halaman (screens) secara terstruktur dalam aplikasi Flutter. Alih-alih membuat instance halaman baru setiap kali berpindah, kita memanggil halaman berdasarkan nama unik (String) yang telah didaftarkan pada properti routes di MaterialApp. Ini membuat kode lebih rapi dan navigasi lebih mudah dikelola.

Widget yang digunakan di sini memiliki peran spesifik:

  • MaterialApp: Root widget tempat rute-rute aplikasi didaftarkan melalui properti routes.

  • Navigator.pushNamed(): Metode yang digunakan untuk berpindah ke halaman baru dengan memanggil nama rute yang telah didaftarkan, menempatkan halaman baru di atas tumpukan navigasi.

  • Navigator.pop(): Metode yang digunakan untuk kembali ke halaman sebelumnya (menghapus halaman saat ini dari tumpukan).

  • StatelessWidget: Digunakan untuk membuat kelas halaman (seperti Product dan ProductDetail) karena halaman-halaman ini hanya menampilkan data dan tidak mengelola perubahan state internal.

Berikut adalah langkah langkah penerapannya:

1. Buat file Dart baru (misalnya main.dart atau file lain yang dituju).

2. Buat class menggunakan StatelessWidget dengan nama MyNav yang akan berfungsi sebagai root aplikasi.

3. Inisialisasi rute pada MaterialApp:


                return MaterialApp(
                    initialRoute: '/',
                    routes: {
                        '/': (context) => const Product(),
                        '/product_detail': (context) => const ProductDetail(),
                    },
                );

4. Buat class Product dan ProductDetail sebagai representasi halaman yang akan dinavigasi.

Kode Program Lengkap Navigation dan Routing:

Penjelasan Kode

  • MyNav: Kelas root yang mendefinisikan sistem routing aplikasi:

    • initialRoute: '/': Menetapkan Product sebagai halaman pertama yang dimuat saat aplikasi dijalankan.
    • routes: { ... }: Sebuah map yang mendaftarkan nama rute (String) dan widget halaman yang bersangkutan (Widget Function(BuildContext)). Misalnya, nama rute '/' merujuk pada kelas Product, dan '/product_detail' merujuk pada kelas ProductDetail.

  • Product: Halaman awal.

    • onPressed: () { ... }: Saat tombol "Go to Product Detail" ditekan, fungsi Navigator.pushNamed(context, '/product_detail') dipanggil. Ini memerintahkan Flutter untuk menambahkan halaman ProductDetail ke tumpukan navigasi, merujuk pada nama rute yang telah didaftarkan.

  • ProductDetail: Halaman tujuan.

    • onPressed: () { ... }: Saat tombol "Back to Product" ditekan, fungsi Navigator.pop(context) dipanggil. Ini memerintahkan Flutter untuk menghapus halaman ProductDetail dari tumpukan, sehingga halaman sebelumnya, yaitu Product, akan ditampilkan kembali.

Output

Penjelasan Tampilan

  • Product Screen: Menampilkan judul "Product" dan tombol "Go to Product Detail". Menekan tombol ini akan memicu Navigator.pushNamed() untuk berpindah ke halaman detail.

  • Product Detail Screen (setelah navigasi): Menampilkan judul "Product Detail" dan tombol "Back to Product". Menekan tombol ini akan memicu Navigator.pop() untuk kembali ke halaman Product.

  • Konsep Tumpukan: Perpindahan dari Product ke ProductDetail (push) dan kembali lagi (pop) menunjukkan konsep tumpukan navigasi di mana setiap halaman baru diletakkan di atas yang lama, dan saat kembali, halaman teratas dihapus.

Mengirim dan Menerima Data antar Halaman

Demonstrasi ini menampilkan dua cara utama dalam flutter untuk mengirim data antar halaman:

  • Menggunakan constructor pada saat menggunakan rute anonim (materialpageroute).
  • Menggunakan arguments pada saat menggunakan named routes (navigator.pushnamed).

Berikut adalah kode program lengkap yang menggabungkan semua kelas dan logika navigasi:

Kode Program Lengkap

Penjelasan Implementasi

Pada kode di atas, pengiriman dan penerimaan data dilakukan melalui dua skenario:

  1. Pengiriman via constructor (ke MyProfile):

    • mengirim: menggunakan Navigator.push() dengan MaterialPageRoute. data (id: 1, name: 'Masnoer') dikirim langsung saat membuat instance MyProfile.
    • menerima: kelas MyProfile mendefinisikan variabel final di constructor-nya dan data langsung tersedia untuk digunakan di method build().

  2. Pengiriman via arguments (ke MyProduct):

    • mengirim: menggunakan Navigator.pushNamed('/product'). data dikirim dalam bentuk Map melalui properti arguments.
    • menerima: kelas MyProduct mengambil data dari properti settings.arguments milik ModalRoute.of(context). data ini kemudian di-cast ke tipe Map untuk diekstrak nilai-nilainya.

Output

Saat Tombol Profile ditekan

Saat Tombol Product ditekan

penjelasan tampilan

berdasarkan kode program di atas, berikut penjelasan alur tampilan aplikasi:

  • halaman awal (home page) menampilkan dua tombol:
    • profile (via constructor) → mengirim data langsung melalui konstruktor dan membuka halaman myprofile.
    • product (via arguments) → mengirim data melalui navigator.pushnamed() dan membuka halaman myproduct.
  • pada halaman myprofile, teks id dan name tampil sesuai data yang dikirim dari home page (contoh: id: 1, name: masnoer).
  • pada halaman myproduct, data product id dan product name ditampilkan berdasarkan arguments (contoh: product id: 101, product name: laptop).
  • masing-masing halaman tujuan memiliki tombol back untuk kembali ke halaman utama dengan navigator.pop(context).

link Tugas bisa diakses melalui link : https://github.com/muhammadhafiz27/Multiscreen-Flutter.git

Setup Environment, Dart Dasar dan OOP Dart

Card image Read More

Setup Flutter Development, Stateless & Statefull Widget, Basic Widgets

Card image Read More

Input Widgets dan Basic Form

Card image Read More