Bagaimana Cara Menambah Navigasi ke Aplikasi Flutter?
Irhan Hisyam Dwi Nugroho
•
14 May 2025
•
99
Bagaimana cara menambah navigasi ke aplikasi Flutter? MinDi akan bantu kamu melakukannya dengan mudah.
Navigasi penting untuk membuat aplikasi lebih interaktif, dan Flutter punya banyak pilihan seperti Drawer, Bottom Navigation, dan Navigation Rail.
Yuk, simak cara menambah navigasi di aplikasi Flutter kamu. Dengan langkah-langkah ini, aplikasi kamu bakal jadi lebih seru dan mudah digunakan!
Apa Itu Navigasi dalam Aplikasi Flutter?
Navigasi dalam aplikasi Flutter merujuk pada cara berpindah antar tampilan atau halaman dalam aplikasi.
Hal ini memungkinkan pengguna untuk menjelajahi berbagai bagian aplikasi dengan mudah, seperti berpindah dari halaman utama ke halaman pengaturan atau detail produk.
Di Flutter, navigasi dilakukan menggunakan berbagai teknik dan widget, seperti Navigator, Drawer, dan BottomNavigationBar, yang memudahkan transisi antar halaman dengan cara yang mulus.
Dengan navigasi yang baik, pengalaman pengguna jadi lebih lancar dan aplikasi terasa lebih intuitif saat digunakan.
Baca juga : Panduan Memilih Bootcamp Mobile Apps Development Terbaik
Navigasi dengan Navigator
Sumber: Canva
Navigasi dengan Navigator adalah cara paling dasar untuk berpindah antar halaman di aplikasi Flutter.
Navigator bekerja dengan memanipulasi stack (tumpukan) halaman, yang artinya halaman baru dimasukkan ke atas stack, sementara halaman sebelumnya disembunyikan.
Ini memungkinkan transisi antar halaman yang mulus. Berikut adalah beberapa teknik dasar untuk menggunakan Navigator dalam Flutter:
1. Navigator.push()
Navigator.push() digunakan untuk menambahkan halaman baru ke atas stack navigasi. Halaman baru akan ditampilkan, sementara halaman sebelumnya tetap berada di bawah stack.
Kode berikut menunjukkan bagaimana cara menggunakannya:
Navigator.push( context, MaterialPageRoute(builder: (context) => HalamanBaru()), ); |
Dalam kode ini, saat pengguna menekan tombol atau melakukan aksi tertentu, halaman baru akan muncul dengan transisi yang halus.
2. Navigator.pop()
Navigator.pop() digunakan untuk menghapus halaman teratas dari stack dan kembali ke halaman sebelumnya. Fungsi ini biasanya digunakan ketika kita ingin kembali ke halaman sebelumnya.
Berikut contoh cara menggunakannya:
Navigator.pop(context); |
Ketika dipanggil, halaman yang sedang ditampilkan akan ditutup dan aplikasi akan kembali ke halaman sebelumnya.
3. Navigator.pushReplacement()
Navigator.pushReplacement() menggantikan halaman teratas dengan halaman baru, sehingga halaman sebelumnya tidak muncul dalam stack navigasi.
Contoh penggunaannya:
Navigator.pushReplacement( context, MaterialPageRoute(builder: (context) => HalamanPengganti()), ); |
Halaman lama akan dihapus dari stack, dan halaman baru akan menggantikan posisi halaman sebelumnya.
Baca juga : Mengenal Struktur dan Komponen Flutter dalam Aplikasi
Laci Navigasi (Drawer)
Sumber: Canva
Laci navigasi atau Drawer adalah elemen UI yang sangat populer untuk menampilkan menu samping yang dapat diakses oleh pengguna dengan menggeser layar atau mengetuk ikon menu. Berikut cara membuat dan menggunakan Drawer di Flutter:
1. Menambahkan Drawer ke Scaffold
Untuk menampilkan Drawer, kita harus menambahkannya ke dalam widget Scaffold. Drawer ini akan muncul ketika pengguna mengetuk ikon menu atau menggeser layar dari sisi kiri.
Di dalam Drawer, kita bisa menambahkan berbagai item menu yang dapat dipilih oleh pengguna untuk berpindah antar halaman.
Scaffold( appBar: AppBar(title: Text('Contoh Drawer')), drawer: Drawer( child: ListView( children: <Widget>[ DrawerHeader( child: Text('Header Laci'), ), ListTile(title: Text('Menu 1')), ListTile(title: Text('Menu 2')), ], ), ), body: Center(child: Text('Halaman Utama')), ); |
2. Navigasi dari Drawer
Setiap item dalam Drawer biasanya akan digunakan untuk menavigasi pengguna ke halaman berbeda dalam aplikasi.
Untuk ini, kita bisa menggunakan Navigator.push() untuk mengalihkan pengguna ke halaman baru.
Dengan menambahkan fungsi navigasi pada item menu, pengguna dapat berpindah antar halaman hanya dengan memilih menu di Drawer.
ListTile( title: Text('Menu 1'), onTap: () { Navigator.push( context, MaterialPageRoute(builder: (context) => Halaman1()), ); }, ), |
3. Menutup Drawer Setelah Pemilihan
Setelah memilih item menu, kita sering kali ingin Drawer ditutup secara otomatis agar pengguna bisa kembali fokus pada konten utama.
Untuk menutup Drawer, kita dapat menggunakan Navigator.pop(context) yang akan menutup Drawer dan melanjutkan ke halaman yang dipilih.
Ini memberikan pengalaman pengguna yang lebih baik karena menu samping tidak tetap terbuka setelah navigasi.
ListTile( title: Text('Menu 1'), onTap: () { Navigator.pop(context); // Menutup Drawer Navigator.push( context, MaterialPageRoute(builder: (context) => Halaman1()), ); }, ), |
Baca juga : Flutter Widget: Pengertian, Jenis, dan Cara Menggunakannya
Bilah Navigasi Bawah (Bottom Navigation)
Bottom Navigation adalah cara yang efektif untuk menampilkan beberapa tab utama di bagian bawah layar aplikasi. Berikut cara menambahkan Bottom Navigation di aplikasi Flutter:
1. Menambahkan BottomNavigationBar ke Scaffold
Untuk menambahkan BottomNavigationBar, cukup tambahkan widget ini di dalam Scaffold pada aplikasi Flutter.
Setiap tab akan menampilkan ikon dan label untuk membedakan fitur atau halaman utama. Berikut contoh kode untuk menambahkan Bottom Navigation:
Scaffold( appBar: AppBar(title: Text('Contoh Bottom Navigation')), body: Center(child: Text('Konten Utama')), bottomNavigationBar: BottomNavigationBar( items: const <BottomNavigationBarItem>[ BottomNavigationBarItem( icon: Icon(Icons.home), label: 'Home', ), BottomNavigationBarItem( icon: Icon(Icons.account_circle), label: 'Profile', ), ], currentIndex: _selectedIndex, onTap: _onItemTapped, ), ); |
Penjelasan:
Kode di atas menambahkan dua tab pada Bottom Navigation—tab “Home” dan “Profile”. Pengguna dapat memilih tab tersebut untuk melihat konten yang relevan dengan tab yang dipilih.
2. Mengubah Konten Berdasarkan Tab yang Dipilih
Dengan menggunakan currentIndex, kita bisa mengontrol tab mana yang sedang dipilih dan menampilkan konten yang berbeda berdasarkan pilihan tersebut.
Fungsi onTap akan memanggil setiap kali pengguna memilih tab baru. Berikut contoh implementasinya:
int _selectedIndex = 0; void _onItemTapped(int index) { setState(() { _selectedIndex = index; }); } body: _selectedIndex == 0 ? HalamanHome() : HalamanProfile(), |
Penjelasan:
Kode ini mengubah konten yang ditampilkan di body berdasarkan tab yang dipilih. Ketika tab “Home” dipilih, HalamanHome() akan tampil, dan ketika tab “Profile” dipilih, HalamanProfile() akan muncul.
Baca juga : Panduan Belajar Flutter untuk Membuat Aplikasi Mobile
Bilah Navigasi Samping (Navigation Rail)
Sumber: Canva
Navigation Rail adalah opsi navigasi untuk aplikasi dengan tata letak besar atau kompleks, seperti aplikasi desktop atau tablet. Berikut cara menambahkan Navigation Rail di aplikasi Flutter:
1. Menambahkan NavigationRail ke Scaffold
Untuk menggunakan NavigationRail, kita menambahkannya ke dalam widget Scaffold seperti Drawer atau BottomNavigationBar.
NavigationRail akan muncul di sisi kiri layar dan memungkinkan pengguna memilih tab yang berbeda dengan jelas. Berikut adalah contoh implementasi dasar NavigationRail:
Scaffold( appBar: AppBar(title: Text('Contoh Navigation Rail')), body: Row( children: <Widget>[ NavigationRail( selectedIndex: _selectedIndex, onDestinationSelected: (int index) { setState(() { _selectedIndex = index; }); }, destinations: const <NavigationRailDestination>[ NavigationRailDestination( icon: Icon(Icons.home), label: Text('Home'), ), NavigationRailDestination( icon: Icon(Icons.account_circle), label: Text('Profile'), ), ], ), Expanded( child: Center( child: _selectedIndex == 0 ? HalamanHome() : HalamanProfile(), ), ), ], ), ); |
Penjelasan:
Kode di atas menambahkan NavigationRail di sisi kiri layar dengan dua tab, “Home” dan “Profile”. Pengguna dapat memilih salah satu tab untuk menampilkan konten yang sesuai.
2. Menyesuaikan Tampilan Berdasarkan Tab yang Dipilih
Seperti Bottom Navigation, NavigationRail juga memungkinkan kita untuk menampilkan konten berbeda berdasarkan tab yang dipilih.
Dengan menggunakan selectedIndex, kita bisa mengubah tampilan konten di bagian utama aplikasi. Berikut adalah contoh implementasinya:
int _selectedIndex = 0; body: _selectedIndex == 0 ? HalamanHome() : HalamanProfile(), |
Penjelasan:
Ketika tab “Home” dipilih, aplikasi menampilkan HalamanHome(), dan ketika tab “Profile” dipilih, HalamanProfile() ditampilkan. Ini memungkinkan pengguna untuk berpindah antar fitur aplikasi dengan mudah.
Baca juga : Panduan Lengkap Flutter Developer Roadmap untuk Pemula
Ingin Jadi Mobile Developer Profesional?
Setelah mempelajari cara menambah navigasi ke aplikasi Flutter, kini saatnya mengasah keterampilan Flutter kamu lebih jauh!
Yuk, ikuti Bootcamp Mobile Development di dibimbing.id! Di sini, kamu akan mempelajari cara membangun aplikasi mobile profesional menggunakan Flutter, termasuk teknik navigasi, desain UI, dan pengelolaan state.
Belajar langsung dari mentor berpengalaman dengan kurikulum praktis yang membantumu menguasai keterampilan pengembangan mobile yang dibutuhkan di dunia industri.
Dengan lebih dari 840+ hiring partner dan tingkat keberhasilan alumni 96%, peluang kariermu di dunia mobile development semakin terbuka lebar!
Jadi, tunggu apa lagi? Hubungi kami di sini dan Daftar sekarang di dibimbing.id untuk mulai perjalananmu menjadi Mobile Developer profesional. #BimbingSampeJadi!
Referensi
- Navigate to a new screen and back [Buka]
Tags
Irhan Hisyam Dwi Nugroho
Irhan Hisyam Dwi Nugroho is an SEO Specialist and Content Writer with 4 years of experience in optimizing websites and writing relevant content for various brands and industries. Currently, I also work as a Content Writer at Dibimbing.id and actively share content about technology, SEO, and digital marketing through various platforms.
