Baik, Teman Koding, kali ini di tutorial series Flutter Bahasa Indonesia yang ke-13 kita akan mempelajari bagaimana cara membuat Top TabBar View pada Flutter, di tutorial ini akan dijelaskan secara detail bagaimana caranya membuat TabBar di Flutter yang 100% kompatible dengan Android maupun iOS.



Kenapa kita perlu mempelajari TabBar View di Flutter jawabnya karena TabBar Top merupakan salah satu navigasi yang paling banyak digunakan oleh Top Company IT, sebut saja Facebook yang menggunakan Top TabBar View, kemudian WhatsApp, selain itu Flutter juga sudah memberikan library bawaan ketika anda membuat project Flutter. Di tutorial ini kita akan mempelajari Material Design untuk TabBar Flutter yang keren dan ciamik.

Memulai Project Dan Memulai Koding Flutter

Pertama dan yang paling utama sebelum kita masuk tutorial adalah kita harus membuat project flutter terlebih dahulu, buka terminal/cmd kamu dan ketikan perintah di bawah ini :

flutter create tabview

Selanjutnya ubah kode pada file di lib/main.dart menjadi seperti kode di bawah ini :



Jika anda telah menuliskan kode di atas silahkan jalankan kode Flutter yang telah kita tulis, pastikan kamu sudah menjalankan Simulator, Emulator maupun sudah terhubung ke Real Device Android/iOS

flutter run

Hasilnya :




Penjelasa Kode

Mendeklarasikan array untuk TabBar di Flutter
  int _counter = 0;
  int _selectedIndex = 1;
  // set up the button

Membuat Materiak AppBar untuk Tabbar Flutter

 appBar: AppBar(
                    bottom: TabBar(tabs: [
                      Tab(icon: Icon(Icons.directions_railway)),
                      Tab(icon: Icon(Icons.directions_subway)),
                      Tab(icon: Icon(Icons.directions_bike)),
                    ]),
                    title: Text("Tab Bar")), 

Isi konten dari TabBar yang dibuat :

 body: TabBarView(children: [
                  // Taruh Layout Kamu Disini
                  Icon(Icons.directions_railway),
                  Icon(Icons.directions_subway),
                  Icon(Icons.directions_bike),
                ])))); 

Sekian semoga tutorial AppBar untuk Top TabBar View di Flutter dengan Material Design dapat bermanfaar dan membantu kamu yang sedang mempelajari Framework Flutter. Happy Coding and Keep Learning, from KonsepKoding.

Jika ada pertanyaa mengenai Tutorial TabBar Flutter ini kamu dapat menuliskan nya di kolom komentar, jika bermanfaat silahkan share dan bagikan.

#11 Tutorial Flutter Alert Dialog
#12 Tutorial Menampilkan Gambar Pada Flutter