Tutorial Flutter Cara Menciptakan Bottom Navigation Bar

Tutorial Flutter Cara Membuat Bottom Navigation Bar

 - Bottom navigation kafe merupakan widget yang tampilannya berada dibawah, bersifat dinamis, mempunyai halaman lebih dari satu. Karena sifatnya yang dinamis, untuk menciptakan bottom navigation kafe sanggup memakai StatefulWidget. Contoh penggunaan bottom navigation kafe ibarat pada gambar dibawah ini :

Contoh bottom navigation bar

Pada tutorial ini kita akan berguru menciptakan bottom navigation kafe memakai Flutter. Ikuti langkah-langkah berikut :

1.  Buat project flutter

Pertama, buatlah project flutter memakai Android Studio atau memakai CLI. Untuk contoh, projectnya aku beri nama learn_bottom_nav_bar, pastikan laptop kalian terkoneksi dengan internet dan tunggu hingga proses download selesai.

2. Buka file main.dart

Setelah selesai menciptakan projectnya, buka file main.dart yang berada pada folder lib. Hapus semua arahan bawaan yang sudah ada dikala kalian pertama kali menciptakan project.

Pertama yang akan kita tambahkan yaitu arahan untuk import library material :

import 'package:flutter/material.dart'; 

Kemudian buat fungsi main untuk menjalankan aplikasi utama, tambahkan arahan berikut dibawah import :

void main() {   runApp(MaterialApp(     title: 'Navigation Basics',     home: BottomNavPage(),   )); } 

Bagian home tentu masih error alasannya yaitu kita belum menciptakan class BottomNavPage, ikut langkah berikutnya.

3. Buat StatefulWidget

Karena bottom navigation kafe sifatnya dinamis, maka diharapkan StatefulWidget. Buatlah class dibawah fungsi main yang melaksanakan extends pada StatefulWidget

class BottomNavPage extends StatefulWidget {   @override   _BottomNavPageState createState() => _BottomNavPageState(); }  class _BottomNavPageState extends State<BottomNavPage> {      @override   Widget build(BuildContext context) {      } } 

4. Buat Bottom Navigation Bar

Untuk menciptakan bottom navigation bar, kodenya akan kita tambahkan didalam class _BottomNavPageState. Pertama, buat variable gres untuk menampung index dari bottom navigation, letakan diatas Widget build

int _selectedTabIndex = 0; 

Buat fungsi gres dibawahnya untuk handle posisi index menurut posisi item yang dipilih.

void _onNavBarTapped(int index) {   setState(() {     _selectedTabIndex = index;   }); } 

Selanjutnya tambahkan arahan didalam Widget build untuk isi halaman masing-masing item

final _listPage = <Widget>[   Text('Halaman Home'),   Text('Halaman Favorite'),   Text('Halaman Profile'), ]; 

Tambahkan arahan dibawahnya untuk menciptakan BottomNavigationBarItem yang berisi title dan icon

final _bottomNavBarItems = <BottomNavigationBarItem>[   BottomNavigationBarItem(     icon: Icon(Icons.home),     title: Text('Home'),   ),   BottomNavigationBarItem(     icon: Icon(Icons.favorite),     title: Text('Favorite'),   ),   BottomNavigationBarItem(     icon: Icon(Icons.person),     title: Text('Profile'),   ), ]; 

Buat variable untuk menampung widget BottomNavigationBar, tambahkan arahan berikut :

final _bottomNavBar = BottomNavigationBar(   items: _bottomNavBarItems,   currentIndex: _selectedTabIndex,   onTap: _onNavBarTapped, ); 

onTap dipakai untuk menunjukkan listener dikala item diketuk, maka menjalankan fungsi _onNavBarTapped untuk menyesuaikan posisi index yang dipilih.

Pada bab BottomNavigationBar kalian sanggup melaksanakan konfigurasi ibarat mengganti warna, background, type, ukuran icon, text, dan masih banyak lagi.

Terakhir, kini kita akan menampilkan App Bar, Bottom Navigation Bar, dan halaman yang dinamis. Tambahkan arahan berikut :

return Scaffold(     appBar: AppBar(       title: Text('Bottom Navigation Bar')     ),     body: Center(       child: _listPage[_selectedTabIndex]     ),     bottomNavigationBar: _bottomNavBar,   );  } 

5. Source Code main.dart

Untuk arahan lengkap file main.dart ibarat berikut :

import 'package:flutter/material.dart';  void main() {   runApp(MaterialApp(     title: 'Navigation Basics',     home: BottomNavPage(),   )); }  class BottomNavPage extends StatefulWidget {   @override   _BottomNavPageState createState() => _BottomNavPageState(); }  class _BottomNavPageState extends State<BottomNavPage> {      int _selectedTabIndex = 0;    void _onNavBarTapped(int index) {     setState(() {       _selectedTabIndex = index;     });   }    @override   Widget build(BuildContext context) {    final _listPage = <Widget>[     Text('Halaman Home'),     Text('Halaman Favorite'),     Text('Halaman Profile'),   ];    final _bottomNavBarItems = <BottomNavigationBarItem>[     BottomNavigationBarItem(       icon: Icon(Icons.home),       title: Text('Home'),     ),     BottomNavigationBarItem(       icon: Icon(Icons.favorite),       title: Text('Favorite'),     ),     BottomNavigationBarItem(       icon: Icon(Icons.person),       title: Text('Profile'),     ),   ];    final _bottomNavBar = BottomNavigationBar(     items: _bottomNavBarItems,     currentIndex: _selectedTabIndex,     onTap: _onNavBarTapped,   );    return Scaffold(       appBar: AppBar(         title: Text('Bottom Navigation Bar')       ),       body: Center(         child: _listPage[_selectedTabIndex]       ),       bottomNavigationBar: _bottomNavBar,     );    } }

Selanjutnya kalian coba menjalankan projectnya dengan emulator atau real device, maka balasannya akan ibarat berikut :

Demikian Tutorial Flutter Cara Membuat Bottom Navigation Bar, jangan lupa untuk share atau kalau mau berdiskusi sanggup lewat kolom komentar. Ikuti terus website codingtive untuk mendapat artikel dan tutorial lainnya. 

Share this post