Setelah di artikel sebelumnya kita berhasil membuat tampilan sederhana dengan 3 tab yang masing-masing menampilkan widget berbeda antara satu dan yang lain. Mirip dengan UI Static WhatsApp, kini kita akan membuat perubahan dengan menampilkan widget-wigdet sesungguhnya yang ada dalam aplikasi WhatsApp. Bagaimana caranya ?
Pertama kita jalankan projek sebelumnya, akan tampil seperti ini :
Bagi yang belum membuat dari awal, bisa ikuti dari awal. Klik tautan ini [ Example ] Layouting Static UI Whatsapp Dengan Flutter
Oklah, markijut!
Mari Kita Lanjut 😁
Langsung kita menuju ke bagian body : TabBarView()
body: TabBarView(
children: [
Text("Ini akan muncul di dalam tab CHATS"),
Text("Ini akan muncul di tab STATUS"),
Text("Ini akan muncul di tab PANGGILAN")
],
),
Di bagian ini, kita akan mendesain atau meletakkan widget-widget yang diperlukan. Sesuai dengan komentar yang ada dalam widget Text() tersebut. Widget yang kita letakkan menggantikan Text() itu nanti akan mengisi layar CHATS, STATUS ataupun PANGGILAN sesuai dengan posisi letak widget kita.
Kita coba meletakkan ikon menggantikan Text("Ini akan muncul di dalam tab CHATS"), menjadi :
body: TabBarView(
children: [
Icon(
Icons.car_repair_outlined
),
Text("Ini akan muncul di tab STATUS"),
Text("Ini akan muncul di tab PANGGILAN")
],
),
Hasilnya :
Nah begitulah, konsepnya 😎
Sekarang mari kita gunakan widget ListTile() untuk menampilkan static Chats yang ada seperti dalam WhatsApp. Kenapa ListTile() ?
Karena ListTile() merupakan widget yang memiliki properti :
- leading sebagai penampung untuk ikon / gambar.
- title sebagai tempat menuliskan suatu judul, layaknya nama dalam pengirim chat.
- subtitle sebagai wadah untuk melihat sebagian isi dari chat.
- thriling untuk menambahkan fungsi lain seperti titik tiga yang ada di sebelah kanan chat.
Kita ganti script icon() tadi dengan widget ListTile() menjadi :
body: TabBarView(
children: [
ListTile(
leading: Icon(
Icons.person
),
title: Text("Nama Pengirim Chat"),
subtitle: Text("Sebagian isi chat yang diterima"),
),
Text("Ini akan muncul di tab STATUS"),
Text("Ini akan muncul di tab PANGGILAN")
],
),
Sampai sini kita jalankan ulang dengan menekan tombol r ( Hot Restart ), hasilnya :
body: TabBarView(
children: [
ListTile(
leading: CircleAvatar(
child: Icon(
Icons.person
),
),
title: Text("Nama"),
subtitle: Text("Sebagian isi chat yang diterima"),
),
Text("Ini akan muncul di tab STATUS"),
Text("Ini akan muncul di tab PANGGILAN")
],
),
Hasilnya :
Sip, jadi 😎
Namun selain begitu, kita juga bisa menggunakan widget ListView.builder() untuk menampilkan seperti ada banyak chats. Hanya membuat satu widget ListTile() tetapi yang muncul sesuai dengan keinginan kita. Kalian bisa try and run sendiri dulu yah, pada artikel selanjutnya kita akan bahas mengenai hal ini...
See you 😁
Tags:
Flutter