Pada bagian ini, kita akan membuat tampilan halaman login yang sederhana. Halaman login biasanya terdiri dari dua elemen input (untuk email dan password) dan satu tombol untuk mengirimkan data.
b. Pengenalan Widget Flutter untuk Desain UI
TextField: Widget untuk input teks.
RaisedButton: Widget tombol yang sedikit menonjol dengan efek elevasi.
Container: Widget serbaguna yang dapat digunakan untuk layout, penataan, dan gaya.
Column dan Row: Widget untuk menata anak-anak widget secara vertikal (Column) atau horizontal (Row).
Menyusun Layout dengan Row dan Column:
Gunakan Column untuk menata elemen login secara vertikal, dan Container untuk memberikan jarak atau padding tambahan.
d. Form login keycloak
class LoginForm extends StatelessWidget {
const LoginForm({super.key});
State management adalah cara mengelola data atau status dalam aplikasi Flutter. Pada contoh form login ini, kita akan menggunakan setState untuk memperbarui tampilan berdasarkan input pengguna.
b. Menggunakan setState untuk Mengelola State Form
Penjelasan setState:
setState adalah metode yang digunakan untuk memperbarui tampilan aplikasi saat state berubah. Misalnya, saat pengguna mengetik di TextField, kita bisa memperbarui variabel untuk menyimpan teks yang diinput.
Menggunakan onChanged:
Kita bisa menggunakan properti onChanged pada TextField untuk menangkap input pengguna secara real-time.
Menyimpan Input Pengguna:
Nilai yang diinput dapat disimpan dalam variabel dan digunakan untuk validasi atau operasi lebih lanjut.
b. Memvalidasi Input Pengguna
Validasi Dasar:
Pastikan bahwa email dan password tidak kosong sebelum melanjutkan proses login.
void _validateAndSubmit() {
if (_email.isEmpty || _password.isEmpty) {
// Tampilkan pesan kesalahan
} else {
// Proses login
}
}
Pesan Kesalahan:
Gunakan widget seperti Text untuk menampilkan pesan kesalahan di bawah TextField jika validasi gagal.
4. Navigasi
a. Navigasi Dasar dengan Navigator
Navigator: Digunakan untuk berpindah dari satu halaman ke halaman lain dalam aplikasi Flutter.
b. Berpindah dari Halaman Login ke Halaman Utama
Menambahkan Navigasi:
Setelah pengguna berhasil login, kita dapat menggunakan Navigator.pushReplacement untuk menggantikan halaman login dengan halaman utama.
Materi Pelatihan Flutter: Hari 2 - Membuat Halaman Login
Slide:
SlideUrl slide materi login supabase keycloak https://docs.google.com/presentation/d/1b7DYfdg_A9tZlSw-ZWuLg-j3Iwag3TS__2JkCRcNloI/edit?usp=sharing
Waktu Pelatihan: 2-4 Jam
1. Mendesain UI Halaman Login
a. Pengenalan Desain UI
Pada bagian ini, kita akan membuat tampilan halaman login yang sederhana. Halaman login biasanya terdiri dari dua elemen input (untuk email dan password) dan satu tombol untuk mengirimkan data.
b. Pengenalan Widget Flutter untuk Desain UI
c. Membuat Form Login Sederhana
Langkah-langkah:
d. Form login keycloak
@override Widget build(BuildContext context) { return Column( mainAxisAlignment: MainAxisAlignment.center, children: [ ElevatedButton( onPressed: () { // Aksi Login }, child: const Text('Login keycloak'), ), ], ); } }
a. Pengenalan Manajemen State di Flutter
State management adalah cara mengelola data atau status dalam aplikasi Flutter. Pada contoh form login ini, kita akan menggunakan
setState
untuk memperbarui tampilan berdasarkan input pengguna.b. Menggunakan
setState
untuk Mengelola State FormPenjelasan
setState
:setState
adalah metode yang digunakan untuk memperbarui tampilan aplikasi saat state berubah. Misalnya, saat pengguna mengetik di TextField, kita bisa memperbarui variabel untuk menyimpan teks yang diinput.Contoh Penggunaan
setState
:3. Penanganan Input Pengguna
a. Membaca Nilai dari TextField
Menggunakan
onChanged
: Kita bisa menggunakan propertionChanged
padaTextField
untuk menangkap input pengguna secara real-time.Menyimpan Input Pengguna: Nilai yang diinput dapat disimpan dalam variabel dan digunakan untuk validasi atau operasi lebih lanjut.
b. Memvalidasi Input Pengguna
Text
untuk menampilkan pesan kesalahan di bawah TextField jika validasi gagal.4. Navigasi
a. Navigasi Dasar dengan Navigator
b. Berpindah dari Halaman Login ke Halaman Utama
Navigator.pushReplacement
untuk menggantikan halaman login dengan halaman utama.