Tutorial Flutter Cara Membuat Bottom Navigation Bar

Tutorial Flutter Cara Membuat Bottom Navigation Bar
Tutorial Flutter Cara Membuat Bottom Navigation Bar

Codingtive.com - Bottom navigation bar merupakan widget yang tampilannya berada dibawah, bersifat dinamis, memiliki halaman lebih dari satu. Karena sifatnya yang dinamis, untuk membuat bottom navigation bar dapat menggunakan StatefulWidget. Contoh penggunaan bottom navigation bar seperti pada gambar dibawah ini :
Contoh bottom navigation bar
Contoh bottom navigation bar
Pada tutorial ini kita akan belajar membuat bottom navigation bar menggunakan Flutter. Ikuti langkah-langkah berikut :

1.  Buat project flutter

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

2. Buka file main.dart

Setelah selesai membuat projectnya, buka file main.dart yang berada pada folder lib. Hapus semua kode bawaan yang sudah ada ketika kalian pertama kali membuat project.
Pertama yang akan kita tambahkan yaitu kode untuk import library material :
import 'package:flutter/material.dart';
Kemudian buat fungsi main untuk menjalankan aplikasi utama, tambahkan kode berikut dibawah import :
void main() {
  runApp(MaterialApp(
    title: 'Navigation Basics',
    home: BottomNavPage(),
  ));
}
Bagian home tentu masih error karena kita belum membuat class BottomNavPage, ikut langkah berikutnya.

3. Buat StatefulWidget

Karena bottom navigation bar sifatnya dinamis, maka diperlukan StatefulWidget. Buatlah class dibawah fungsi main yang melakukan 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 membuat bottom navigation bar, kodenya akan kita tambahkan didalam class _BottomNavPageState. Pertama, buat variable baru untuk menampung index dari bottom navigation, letakan diatas Widget build
int _selectedTabIndex = 0;
Buat fungsi baru dibawahnya untuk handle posisi index berdasarkan posisi item yang dipilih.
void _onNavBarTapped(int index) {
  setState(() {
    _selectedTabIndex = index;
  });
}
Selanjutnya tambahkan kode didalam Widget build untuk isi halaman masing-masing item
final _listPage = <Widget>[
  Text('Halaman Home'),
  Text('Halaman Favorite'),
  Text('Halaman Profile'),
];
Tambahkan kode dibawahnya untuk membuat 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 kode berikut :
final _bottomNavBar = BottomNavigationBar(
  items: _bottomNavBarItems,
  currentIndex: _selectedTabIndex,
  selectedItemColor: Colors.blueAccent,
  unselectedItemColor: Colors.grey,
  onTap: _onNavBarTapped,
);
onTap digunakan untuk memberikan listener ketika item diketuk, maka menjalankan fungsi _onNavBarTapped untuk menyesuaikan posisi index yang dipilih.

Pada bagian BottomNavigationBar kalian dapat melakukan konfigurasi seperti mengganti warna, background, type, ukuran icon, text, dan masih banyak lagi.
Terakhir, sekarang kita akan menampilkan App Bar, Bottom Navigation Bar, dan halaman yang dinamis. Tambahkan kode berikut :
return Scaffold(
    appBar: AppBar(
      title: Text('Bottom Navigation Bar')
    ),
    body: Center(
      child: _listPage[_selectedTabIndex]
    ),
    bottomNavigationBar: _bottomNavBar,
  ); 
}

5. Source Code main.dart

Untuk kode lengkap file main.dart seperti 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,
    selectedItemColor: Colors.blueAccent,
    unselectedItemColor: Colors.grey,
    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 hasilnya akan seperti berikut :

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

Berlangganan update artikel terbaru via email:

Belum ada Komentar untuk "Tutorial Flutter Cara Membuat Bottom Navigation Bar"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel