Part 7 : Membangun Aplikasi Tiruan Grab dengan Flutter — Home Screen
Tiba Saatnya membuat tampilan utama dari aplikasi ini. Aplikasi ini tentunya membutuhkan assets agar dapat mirip dengan aslinya. Setelah mencari assets tersebut di internet, akhirnya saya menemukan pada salah satu repo di github berikut.
Dengan sedikit pengeditan menggunakan free photo editor, saya mengubah gambar tersebut agar backgroundnya transparan. Assets tersebut dapat di download disini. Kemudian ubah pubspec.yaml sesuai dengan nama folder yang teman-teman buat. Versi saya seperti ini :
assets:
- assets/images/
- assets/images/pay/
- assets/images/feature/
Tampilan ini akan kita buat menjadi 3 bagian:
- bagian pembayaran
- menu layanan, dan
- grid card info terbaru.
Tampilan Pembayaran
Tampilan pembayaran ini terbagi juga menjadi 2 bagian, bagian background dan card menu pembayaran. Background yang bewarna sebenarnya berubah berdasarkan waktu, dan sepertinya background tersebut berupa gambar. Tapi nanti akan dibuat menjadi gradient saja.
Buat file baru bernama home_screen.dart pada folder bottom_navigation. Untuk background pembayaran, gunakan kode berikut :
Pada saat di simpan, belum akan terjadi perubahan. Kita perlu menyesuaikan komponen pada main_screen.dart, yaitu pada bagian berikut :
Simpan dan periksa perubahannya. Jika tidak ada apapun yang berubah, lakukan hot restart. Setelah itu kita buat di dalam Stack diatas background card untuk pembayaran. Untuk ikon menu dan labelnya, kita buat dulu reusable widget karena akan digunakan tiga kali. Buat file baru dalam folder widgets dengan nama grab_icon_menu.dart.
Untuk ucapan sapaannya, disini menggunakan “Good Afternoon” saja. Untuk mendapatkan nilai waktu saat ini, akan dibuat pada screen activity. Untuk posisi tulisan/text tersebut, gunakan kode berikut :
Pada kod diatas digunakan Column karena nanti card untuk pembayaran akan diletakkan dibawah dari padding text sapaan. Jadi bukan suatu yang sia-sia menggunakan column untuk saat ini. Untuk card tersebut, disini akan menggunakan widget card langsung tanpa membuat custom widget. Posisikan kode untuk Card Payment tersebut dibawah padding text sapaan.
Karena tampilan sekarang tidak melebihi tinggi dari layar yang digunakan, maka scroll tidak aktif sehingga animasi bottom navigation tidak berjalan. Jika ingin animasi berjalan tanpa butuh konten, bisa menggunakan widget sliver yang lain. Tapi sebenarnya animasi tersebut hanya aktif pada home screen saja. Sampai saat ini tampilan yang kita punya seperti gambar dibawah :
Tampilan Menu Layanan
Menu layanan ini nantinya memanfaatkan wiget grab_icon_menu.dart yang telah kita buat sebelumnya. Sebenarnya bisa dibuat menggunakan grid, tapi saya akan menggunakan Row dan Column untuk menu layanan ini dan widget grid akan saya gunakan pada komponen terakhir pada home screen ini.
Karena pada assets tidak ada icon untuk menu more, kita buat dulu icon more tersebut. Buat file baru bernama grab_more_icon_menu.dart lalu copy kode berikut, jangan lupa dipelajari juga kodenya.
Untuk menu layanan, letakkan diluar Stack widget. Kita tidak ingin widget menumpuk pada bagian atas. Posisikan kode untuk menu layanan setelah widget Stack, tapi masih didalam widget Column. Kodenya ini :
Divider
Divider ini cukup menggunakan container dengan tinggi tertentu, berikan warna background abu-abu dan widht-nya 100% layar.
Container(
width: double.infinity,
height: 8,
color: Colors.grey[300],
),
Grid Card
Untuk bagian GridView ini, mungkin ada beberapa catatan pada saat teman-teman menulis sendiri. Saya jabarkan seperti berikut:
- Agar tidak bertabrakan antar grid, berikan padding
- Untuk mencegah scroll view di dalam scroll view, gunakan opsi pyshic pada GridView. Aktifkan shrinkWrap juga.
- Jumlah axis count = 2
- Aspect rasionya juga di sesuaikan. default tidak akan semua konten dapat ditampilkan.
- Untuk memberikan efek sudut melengkung pada gambar, gunakan borderRadius ClipRRect
- Untuk Shadow Card, gunakan elevation pada Material
Kode lengkap untuk GridView yang saya gunakan seperti dibawah ini :
Tampilan akhir yang didapatkan adalah sebagai berikut :
Sampai disini halaman home sudah selesai dibuat. Pada halaman ini kita merubah tiga file, yaitu pubcpec.yaml, main_screen.dart, home_screen.dart serta membuat beberapa custom widget. Kode lengkap untuk home_screen.dart dapat dilihat dibawah ini.
Halaman lainnya akan saya lanjutkan pada part berikutnya. Masih ada 4 halaman yang akan di lanjutkan.
Tulisan lain dalam seri ini :
