flutter

Merubah Form Login ke Stateful Widget

Sebelumnya kita sudah membuat form login di lib/main.dart pada tutorial ini

Sekarang kita akan pindahkan ke file login.dart

1. Pembuatan class Login

class Login extends StatefulWidget {
  const Login({super.key});
  @override
  State<Login> createState() => LoginState();
}
Keterangan:
  • State<Login> adalah objek state yang menyimpan data untuk widget Login

2. Membuat class LoginState

Tambahkan kode ini :

class LoginState extends State<Login> {
  String? username;
  String? password;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Card(
          child: Padding(
            padding: EdgeInsets.all(16.0),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                Text(
                  ‘Login Form’,
                  style: TextStyle(
                    fontSize: 24.0, // Set font size to 24 logical pixels
                  ),
                ),
                TextField(
                  decoration: InputDecoration(labelText: ‘Username’),
                  onChanged: (nilai) => username = nilai,
                ),
                TextField(
                  obscureText: true,
                  decoration: InputDecoration(labelText: ‘Password’),
                  onChanged: (nilai) => password = nilai,
                ),
                Container(
                  margin: EdgeInsets.only(top: 20),
                  child: ElevatedButton(
                    onPressed: () {
                      if (username == null) {
                        tampilAlert(context, ‘Harap isi usernamenya’);
                      } else if (password == null) {
                        tampilAlert(context, ‘Harap isi passwordnya’);
                      } else if (username == ‘admin’ && password == ‘Testing’) {
                        Navigator.push(
                          context,
                          MaterialPageRoute(
                            builder: (context) {
                              return Dashboard();
                            },
                          ),
                        );
                      } else {
                        tampilAlert(context, ‘Username atau password salah’);
                      }
                    },
                    child: Text(“Login”),
                  ),
                ),
                TextButton(
                  onPressed: () {
                    Navigator.push(
                      context,
                      MaterialPageRoute(
                        builder: (context) {
                          return Register();
                        },
                      ),
                    );
                  },
                  child: Text(‘Register here’),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Keterangan:

  • String? username : untuk mendeklarasikan variabel username yang bisa berisi String ataupun nilai null
  • onChanged: (nilai) => username = nilai : Kode ini berarti ketika isi dari Textfield berubah maka variabel username diisi dengan isi dari Textfield
  • tampilAlert(context, ‘Harap isi usernamenya’), kode ini digunakan untuk menampilkan Alert Dialog
  • Fungsi tampilAlert ini berada dalam file helper.dart

3. Import semua File yang dibutuhkan

import ‘package:teks/dashboard.dart’;
import ‘package:teks/register.dart’;
import ‘package:teks/helper.dart’;
Keterangan:
  • Untuk file dashboard.dart bisa dilihat di tutorial ini
  • Untuk file register.dart dan helper.dart bisa dilihat di tutorial ini

4. Perubahan file main.dart

Rubahlah isi dari file main.dart seperti berikut ini:

import ‘package:flutter/material.dart’;
import ‘package:teks/login.dart’;
void main() {
  runApp(MaterialApp(home: Login()));
}

5. Jalankan Aplikasi

Tekan menu Run -> Start Debugging atau shortcut tombol F5