flutter

Merubah Form Register ke Stateful Widget

1. Perubahan Class Register

Rubahlah class Register menjadi seperti kode berikut ini:

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

2. Membuat Class RegisterState

Tambahkan kode ini :

class RegisterState extends State<Register> {
  String? fullname;
  String? username;
  String? email;
  String? no_hp;
  String? password;
  String? konfirmPassword;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
        child: Card(
          child: Padding(
            padding: EdgeInsets.all(16),
            child: Column(
              children: [
                Container(
                  margin: EdgeInsets.only(top: 90),
                  child: Text(
                    ‘Form Register’,
                    style: TextStyle(
                      fontSize: 24.0, // Set font size to 24 logical pixels
                    ),
                  ),
                ),
                TextField(
                  decoration: InputDecoration(labelText: ‘Full Name’),
                  onChanged: (value) => fullname = value,
                ),
                TextField(
                  decoration: InputDecoration(labelText: ‘Username’),
                  onChanged: (value) => username = value,
                ),
                TextField(
                  decoration: InputDecoration(labelText: ‘E-mail’),
                  onChanged: (value) => email = value,
                ),
                TextField(decoration: InputDecoration(labelText: ‘No. HP’)),
                TextField(
                  obscureText: true,
                  decoration: InputDecoration(labelText: ‘Password’),
                  onChanged: (value) => password = value,
                ),
                TextField(
                  obscureText: true,
                  decoration: InputDecoration(labelText: ‘Confirm Password’),
                  onChanged: (value) => konfirmPassword = value,
                ),
                ElevatedButton(
                  onPressed: () {
                    if (username == null) {
                       tampilAlert(context, ‘Harap isi usernamenya’);
                    } else if (email == null)
                      print(‘Harap isi emailnya’);
                    else {
                      print(
                        ‘Nama Lengkap : $fullname \n Username : $username \n E-mail : $email \n Password: $password \n Konfirmasi Password: $konfirmPassword ‘,
                      );
                    }
                  },
                  child: Text(“Register”),
                ),
                TextButton(
                  onPressed: () {
                    Navigator.pop(context);
                  },
                  child: Text(‘Kembali ke Form Login’),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}
Keterangan:
    • String? fullname : untuk mendeklarasikan variabel dengan nilai null
    • onChanged: (value) => fullname = value : Kode ini berarti ketika isi dari Textfield berubah maka variabel fullname diisi dengan isi dari Textfield
    • tampilAlert(context, ‘Harap isi usernamenya’), kode ini digunakan untuk menampilkan Alert Dialog
    • print(‘Harap isi emailnya’), kode ini untuk menampilkan pesan ke console

3. Membuat Fungsi untuk menampilkan Alert Dialog

Buatlah file lib/helper.dart lalu masukan kode berikut ini:
import ‘package:flutter/material.dart’;
void tampilAlert(BuildContext context, String isi) {
  showDialog(
    context: context,
    builder: (BuildContext context) {
      return AlertDialog(
        content: Text(isi),
        actions: [
          TextButton(
            onPressed: () {
              Navigator.of(context).pop();
            },
            child: Text(‘OK’),
          ),
        ],
      );
    },
  );
}

Keterangan:

  • Navigator.of(context).pop(). kode ini untuk menutup dialog

4. Import file Helper

Buka file register.dart lalu masukkan kode berikut ini:

import ‘package:namaPaketmu/helper.dart’;

5. Jalankan Aplikasi

Tekan menu Run -> Start Debugging atau shortcut tombol F5