Membuat UI ( User Interface ) WhatsApp via Flutter

WhatsApp merupakan aplikasi yang saat ini ( 2024 ) masih menjadi salah satu raja messaging app. UI yang sederhana dan memudahkan pengguna sekalipun masih awal, menjadi salah satu penentu populernya aplikasi ini.

Dengan semakin berkembangnya aplikasi ini, aplikasi inipun mengalami beberapa perubahan UI ( User Interface ). Sampai saat ini yang mengalami perubahan  dengan menu yang berada di sisi bawah. Ada tambahan menu Komunitas sebelum tombol Panggilan, sehingga total menu yang muncul di UI versi Android menjadi 4.

Kurang lebih tampilan yang sekarang seperti berikut :

Dalam contoh pembuatan di artikel ini, kita akan belajar membuat UI WhatsApp dengan versi UI sebelum itu. Tampilan sebelumnya :

Nah, bagaimana caranya!?

Ada beberapa bagian yang dirasa perlu untuk dilakukan. Di artikel ini, pembuatan UI WhatsApp dibagi ke dalam 5 bagian yaitu :

1. Inisialisasi projek awal
2. Membuat Tab Menu 'Chats / Pesan'
3. Membuat Isi Tab 'Status'
4. Bagian Koneksi Basis Data ( 2 Bagian )

Wah 😕

Apakah susah ? Tentu tidak!

Bagaimana tertarik ingin belajar membuat UI WhatsApp menggunakan flutter ? 

Daripada berlama-lama, langsung saja praktikkan membuat UI ini dengan mengikuti step by step yang telah disediakan yah 😇

Berikut kami sajikan tahapan-tahapan yang kami susun guna membuat UI WhatsApp-nya :

1. Inisialisasi / Pembuatan Awal Projek
   
2. Mengisi Tab Chats / Pesan dengan Dummy Data
   
3. Membuat Isi untuk Tab Status dengan Dummy Data
   
4. Mengelola "Chat / Pesan" dengan Data dari Database ( MySQL )
   
5. ( 2 ) Mengelola "Chat / Pesan" Menggunakan Model
   

Itu bagian-bagian yang bisa untuk membuat UI WhatsApp. Yups semangat, semangat dalam belajar dan terus meningkatkan skill dalam IT 😁 

Semoga bermanfaat, see you!