Monday, January 6, 2020

Latihan Widget Flutter : FloatingActionButton, BottomNavigationBar, ListView, dan ExpansionTile

Berlatih Membuat UI pada Flutter
Membuat Tampilan Flutter dengan FloatingActionButton, BottomNavigationBar, ListView, dan ExpansionTile - Salah satu resep utama dalam membuat tampilan aplikasi mobile dengan Flutter adalah mengusai widget-widget penting yang ada dalam framework Flutter. Untuk memahami widget-widget mulai dari struktur, cara kerja, dan hal-hal yang sifat-sifat dari masing-masing widget tersebut tentu saja kita harus banyak-banyak latihan.

Kali ini, saya akan membuat contoh tampilan pada framework flutter yang melibatkan beberapa widget penting yang sering dipakai oleh developer untuk membuat sebuh aplikasi mobile dengan Flutter. Widget-widget yang akan kita bahas dalam artikel ini adalah FloatingActionButton, BottomNavigationBar, ListView, dan ExpansionTile.

Sebelum kita praktik implementasi widget-widget tersebut kedalam sebuah kode untuk membentuk suatu tampilan yang menarik, perlu sobat ketahui penjelasan masing-masing widget tersebut di atas.

FloatingActionButton

FloatingActionButton adalah tombol ikon melingkar yang melayang di atas konten untuk mempromosikan tindakan utama dalam aplikasi. Tombol aksi mengambang paling umum digunakan pada field Scaffold.floatingActionButton.

BottomNavigationBar

BottomNavigationBar adalah Widget material yang ditampilkan di bagian bawah aplikasi untuk memilih di antara beberapa tampilan, biasanya antara tiga dan lima menu.

ListView

ListView adalah widget gulir (berbentuk list) yang paling umum digunakan. Widget ini menampung daftar anak-anak nya, jika melebihi batas ukuran layar akan akan ditampikan kedalam bentuk scroll.

ExpansionTile

ExpansionTile adalah widget yang bisa digunakan sebagai anak dari ListView untuk menampilkan daftar lebih dari satu level. Karena ExpansionTile ini memiliki fitur expand dan collapse, sehingga cocok untuk mengelompokan menu dan mengurangan spase penggunaan layar dengan fitur collapse nya tanpa mengurangi nilai user experience terhadap suatu menu.


Mari langsung saja kita praktikan contoh pembuatan kode tampilan di Flutter yang melibatkan widget-widget tersebut di atas, untuk lebih memahami seperti apa tampilan dan penggunaan widget-widget tersebut.

Contoh Kode

Source code lengkap dari projek di atas bisa diambil melalui link dibawah ini
 
Share This
Previous Post
Next Post

Halo, Saya A.M Hirin seorang Penulis Buku IT, International Freelance Programmer, dan Senior Developer di Perusahaan Konsultan IT. Saya penggila kode dan sudah berkutat selama 15 tahun di dunia pemrograman. Anda membutuhkan bantuan terkait skill dan keahlian saya? Kontak saya melalui email : nump.info@gmail.com

0 komentar: