Salam Teman Koding, pada tutorial ke-14 Flutter series Bahasa Indonesia, kita akan mempelajari mengenai Tutorial Flutter Membuat Bottom TabBarView, dimana di tutorial ini akan di jelaskan bagaiman cara membuat basic Bottom TabBar pada Flutter dengan Icon Material Design.



Pertama, sebelum kita mempelajari tutorial ini, kenapa kita harus mempelajari TabBar Bottom, jawabannya simple karena TabBar Bottom adalah navigasi yang paling dianjurkan dalam dunia UI/UX karena paling pas dengan letak tangan manusia. Contoh aplikasi yang menggunakan TabBar Bottom diantaranya : Instagram, Google, Grab, Gojek, HaloJasa, Pinterest dan masih banyak lagi.

Memulai Project Flutter Dan Koding


Pertama silahkan buat project baru flutter, buka terminal/cmd kamu dan ketikan perintah

flutter create tab_bottom

Lalu setelah project flutter kamu berhasil dibuat silahkan ubah kode pada file ,  lib/main.dart , menjadi seperti kode di bawah ini :
Setelah kamu menuliskan kode di atas silahkan run project flutter mu dengan perintah :

flutter run 

Jika berhasil maka hasil output program flutter mu akan seperti gambar di bawah ini :

Penjelasan Kode 

Pertama kita mendeklarasikan array untuk item TabBar kita dengan kode di bawah ini :

 int _counter = 0;
 int _selectedIndex = 1;

Lalu membuat BottomTabBar berdasarkan index array yang telah di deklarasikan sebelumnya :

bottomNavigationBar: BottomNavigationBar(
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('Home')),
          BottomNavigationBarItem(
              icon: Icon(Icons.message), title: Text('Pesan')),
          BottomNavigationBarItem(
              icon: Icon(Icons.account_box), title: Text('Profile')),
        ],
        currentIndex: _selectedIndex,
        onTap: itemTapped,
        fixedColor: Colors.teal,
      ), 

Ok sekian semoga tutorial Bottom Navigator Bar Flutter ini dapat bermanfaat dan membantu kamu yang sedang mempelajari Framework Google Flutter dan dapat bermanfaat, jika ada pertanyaan silahkan tuliskan di kolom komentar, kunjungi terus https://www.konsepkoding.com/ untuk tutorial pemrograman menarik lainnya. Happy Coding From KonsepKoding.

Baca Tutorial Flutter Dart KonsepKoding Lainnya:
#11 Tutorial Flutter Alert Dialog
#12 Tutorial Menampilkan Gambar Pada Flutter
#13 Tutorial Flutter Membuat Top TabBarView