Flutter Design – Penggunaan Widget TabBar

Untuk teman-teman yang akan baru memulai belajar Flutter silahkan masuk ke artikel ini dulu ya teman-teman ➡ Aplikasi Pertamaku “Halo Semuaaa…“. Jika sudah yuk lanjut baca artikel ini…

Jangan lupa baca artikel sebelumnya ya teman-teman ➡ Berbagi Tema (Warna dan Font Style)

Menerapkan tabs pada aplikasi merupakan hal yang umum ketika pengembang aplikasi mengikuti Material Design guidelines. Pada flutter, pengembang aplikasi disediakan cara mudah untuk membuat layout tabs dengan menggunakan material library.

Berikut langkah-langkah untuk membuat tabs yang akan dijelaskan pada artikel kali ini:

1. Membuat TabController
2. Membuat sebuah tab
3. Memberikan konten pada tiap tab 

1. Membuat TabController

Langkah pertama supaya tabs yang dibuat bekerja dengan baik, kita harus melakukan sinkron pada tab dan konten yang dipilih dengan menggunakan TabController. Pembuatan TabController dapat dilakukan secara manual atau otomatis menggunakan widget DefaultTabController.

Penggunaan widget DefaultTabController merupakan opsi yang paling simple untuk membuat TabController dan membuatnya tersedia untuk semua widget.

DefaultTabController(
  // The number of tabs / content sections to display.
  length: 3,
  child: // Complete this code in the next step.
);

2. Membuat Sebuah Tab

Langkah selanjtunya kita akan membuat beberapa tab, agar pengguna dapat memiliki opsi. Dalam hal ini, kita akan buat tabs menggunakan widget TabBar. Berikut cuplikan kode untuk membuat TabBar yang memiliki 3 widget Tab yang berada di dalam widget AppBar.

DefaultTabController(
  length: 3,
  child: Scaffold(
    appBar: AppBar(
      bottom: TabBar(
        tabs: [
          Tab(icon: Icon(Icons.directions_car)),
          Tab(icon: Icon(Icons.directions_transit)),
          Tab(icon: Icon(Icons.directions_bike)),
        ],
      ),
    ),
  ),
);

3. Membuat Konten Pada Tiap Tab

Selanjutnya agar tab yang dipilih menampilkan isinya, kita dapat menggunakan widget TabBarView . 

Berikut cuplikan kode dan simulasinya, jika teman-teman menggunakan VSCode jalankan projectnya dengan menekan F5, klik hot reload (⚡) atau klik tombol ▶, berikut tampilannya:

Jika ada pertanyaan silahkan komen dan jika artikel ini dirasa bermanfaat, jangan lupa like dan sharenya ya teman-teman. ??????? Sampai bertemu di artikel selanjutnya.
Terima Kasih, Assalamu’alaykum… Salam KODINGINDONESIA

Referensi : https://flutter.dev//