Dalam dunia pengembangan aplikasi, kebutuhan akan antarmuka pengguna yang menarik sangatlah penting. Pada tutorial ini kita akan membahas proses pembuatan UI dengan mengambil inspirasi dari halaman Login Facebook, menunjukkan betapa mudah dan fleksibelnya menggunakan FlutterFlow.
- Membuat Project Baru di FlutterFlow
Pertama-tama buat project baru di FlutterFlow. Dengan memilih nama project dan memanfaatkan template yang tersedia, kita dapat langsung memulai proses desain. Tapi kita tidak perlu memakai template karena disini kita akan mengambil contoh dari aplikasi lain maka buat dari Create Blank saja.
- Menata Layout
Pertama, mari kita mulai dengan menambahkan widget Column dan Row pada UI Builder, jika ada widget AppBar dihapus saja karena tidak diperlukan.
Kedua, gunakan widget Container dan Text untuk membuat kotak pesan yang terlihat di atas layar. Atur tinggi, lebar, dan juga warna Container, serta ketebalan, ukuran dan padding Text supaya terlihat sama persis dengan contoh.
Ketiga, pada Column tambahkan Row baru lalu tambahkan Text untuk label nama Facebook. Atur ketebalan, ukuran, warna, dan Font Family Text agar menyamai contoh aslinya.
Keempat, pada Column tambahkan Column kedua dan tambahkan dua TextField di Column baru tersebut. Atur padding Column serta properti TextField seperti kata Hint, tipe border, dan warna semirip mungkin dengan contoh.
Kelima, tambahkan widget Button di bawah kedua TextField. Atur teks pada Button menjadi bertuliskan Masuk, lebar sama dengan lebar TextField di atasnya, dan warna sesuai dengan warna logo Facebook.
Keenam, di bawah tombol tambahkan Text bertuliskan ‘Lupa kata sandi?’ dan atur warna sama dengan warna tombol di atasnya.
Ketujuh, di bawah kata ‘Lupa kata sandi?’ tambahkan Container dengan tinggi 2px supaya menyerupai sebuah garis horizontal, lalu klik kanan pada garis Container tersebut dan pilih Warp Widget, lalu pilih widget Stack. Tambahkan Container dengan warna sesuai dengan background halaman lalu tambahkan Text dan posisikan text tersebut di tengah garis Container menyerupai contoh.
Kedelapan, tambahkan tombol dan atur properti tombol tersebut sesuai dengan contoh.
Terakhir, tambahkan beberapa Row yang berisikan Text sesuai dengan yang ada di contoh. Tambahkan Icon supaya lebih menyerupai aslinya.
Beginilah tampilan akhir setelah layout selesai disusun rapi, cukup mirip dengan aslinya bukan?
Penutup
Dengan mengikuti langkah-langkah dalam tutorial ini, kita dapat melihat bagaimana FlutterFlow memudahkan proses pembuatan UI yang menarik dan responsif. Baik kamu seorang desainer berpengalaman atau seseorang yang baru memulai, FlutterFlow menawarkan widget dan fitur yang kamu butuhkan untuk mengubah desain menjadi aplikasi siap pakai.
