Flutter Flutter Design – Penggunaan Widget TabBar by Anton Prafanto 4 years ago 0 Comments 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: Membuat TabController Membuat sebuah tab 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// TAGS :android Flutter mobile android mobile apps Share This Articles Share this article
ESP32 Modul 3 – Menjelajahi Deep Sleep ESP32 (3/4) by Anton Prafanto 4 months ago 0 ESP32 dapat dibangunkan dari mode tidur dalam dengan menyentuh pin tertentu, memungkinkan interaksi...
ESP32 Modul 3 – Menjelajahi Deep Sleep ESP32 (2/4) by Anton Prafanto 4 months ago 0 ESP32 dapat bangun dari mode tidur dalam pada interval waktu tertentu, memungkinkan proyek...
ESP32 Modul 3 – Menjelajahi Deep Sleep ESP32 (1/4) by Anton Prafanto 4 months ago 0 ESP32 memiliki fitur mode tidur dalam (deep sleep) yang dapat mengurangi konsumsi daya...