Wednesday, January 1, 2020

Membuat Tabel dengan Freeze Column Pada Flutter

Membuat Freeze Column pada Table Flutter
Cara Membuat Tabel dengan Freeze Column Pada Flutter - Dalam membuat aplikasi mobile, salah satu model layout yang sering digunakan untuk menampilkan informasi kepada pengguna adalah layout tabel. Terkadang developer harus menampilkan informasi dalam bentuk tabel dengan jumlah kolom atau jumlah baris yang sangat banyak.

Padahal kita tahu sendiri bahwa ukuran layar pada device mobile sangatlah terbatas, sehingga untuk menyiasati infromasi yang disajikan kedalam tabel dengan jumlah kolom yang sangat banyak kita perlu melakukan freeze pada kolom tabel tersebut untuk mempertahankan informasi kolom-kolom penting saat pengguna aplikasi melakukan horizontal scrolling.

Lalu bagaimana cara membuat layout tabel dengan freeze column pada Flutter? Sebelum kita mengimplementasikan pada sebuah kode, ada baiknya sobat simak terlebih dahulu konsep layout tabel dengan Freeze Column seperti dibawah ini:
Konsep Layout Freeze Column
Pada layout utama untuk membuat Freeze Column pada Tabel, adalah dengan membagi tabel dengan 2 bagian, dimana bagian pertama (Container tanpa SingleChildScrollView) adalah untuk menaruh freeze column, sedangkan bagian yang satu lagi adalah untuk menaruh unfreeze column (Expanded dengan SingleChildScrollView) dengan axis scroll horizontal.

Untuk lebih memperjelas implementasi kode pada layout di atas, berikut adalah contoh source code nya:

Kode

Hasil Aplikasi
Berikut ada hasil aplikasi dari kode di atas, setelah di jalankan melalui virtual device:


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: