Materi hari kedua training

[rfaturriza]

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

• 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).

c. Membuat Form Login Sederhana

• Langkah-langkah:

  1. Buat Struktur Dasar:

     class LoginPage extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Text('Login'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: LoginForm(),
        ),
      );
     }
     }

  2. Tambahkan TextField untuk Email dan Password:

     class LoginForm extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
      return Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          TextField(
            decoration: InputDecoration(labelText: 'Email'),
          ),
          TextField(
            decoration: InputDecoration(labelText: 'Password'),
            obscureText: true,
          ),
          SizedBox(height: 20),
          ElevatedButton(
            onPressed: () {
              // Aksi login
            },
            child: Text('Login'),
          ),
        ],
      );
     }
     }

  3. 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});

  @override Widget build(BuildContext context) { return Column( mainAxisAlignment: MainAxisAlignment.center, children: [ ElevatedButton( onPressed: () { // Aksi Login }, child: const Text('Login keycloak'), ), ], ); } }

  
  ### 2. Manajemen State

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 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.

• Contoh Penggunaan setState:

  class LoginForm extends StatefulWidget {
  @override
  _LoginFormState createState() => _LoginFormState();
  }
  
  class _LoginFormState extends State<LoginForm> {
  String _email = '';
  String _password = '';
  
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        TextField(
          decoration: InputDecoration(labelText: 'Email'),
          onChanged: (value) {
            setState(() {
              _email = value;
            });
          },
        ),
        TextField(
          decoration: InputDecoration(labelText: 'Password'),
          obscureText: true,
          onChanged: (value) {
            setState(() {
              _password = value;
            });
          },
        ),
        SizedBox(height: 20),
        ElevatedButton(
          onPressed: () {
            // Aksi login menggunakan _email dan _password
          },
          child: Text('Login'),
        ),
      ],
    );
  }
  }

3. Penanganan Input Pengguna

a. Membaca Nilai dari TextField

• 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.

  RaisedButton(
  onPressed: () {
    if (_email.isNotEmpty && _password.isNotEmpty) {
      Navigator.pushReplacement(
        context,
        MaterialPageRoute(builder: (context) => HomePage()),
      );
    } else {
      // Tampilkan pesan kesalahan
    }
  },
  child: Text('Login'),
  );

[rfaturriza]

Buat 1 versi lagi untuk flow login seribase.

• note pak Faisal

[peltops]

Feedback: Tambahan materi untuk hari kedua

1. Tampilan dasar flutter serta struktur UI
2. ⁠Bagan kaitan state di flutter
3. ⁠Struktur sederhana halaman flutter