Tujuan
Tujuan praktikum ini yaitu mahasiswa mampu membuat membuat basic form untuk menerima
inputan dari keyboard dan mengelola inputan :
- Membuat beberapa input widgets
- Membuat dan mengontrol inputan dari user
Alat dan Bahan
- Laptop/PC minimal RAM 4 GB, prosesor dual-core
- Smartphone Android (opsional untuk uji di device)
- Visual Studio Code + ekstensi Flutter & Dart
- Android Studio + Emulator
- Flutter SDK
- Dart SDK
- Modul Praktikum 3: Input Widgets & Basic Form
Langkah Praktikum
- Basic Form dengan TextField
TextFieldadalah widget Flutter untuk menerima input teks sederhana, misalnya nama atau alamat. Pada Praktikum kali ini kita Membuat form sederhana denganTextFielddan tombol untuk menampilkan input viaSnackBar
2. Basic Form dengan TextFormField
Adalah versi lanjutan dari TextField yang mendukung valiidasi input. Dengan cara menambahkan validator, aplikasi dapat memeriksa apakah data yang kita masukkan sudah sesuai aturan, misalnya email mengandung simbol “@” atau password minimal 6 karakter. Membuat form dengan menggunakan TextFormField yang mendukung validasi input (seperti format email).
Tugas Latihan
Buatlah form pendaftaran pengguna dengan menggunakan 4 buah form yaotu nama, email,
password, confirm password dan satu tombol submit.
Instruksi :
- Gunakan MaterialApp sebagai root pada main.dart
- Buat 2 buah file dart yaitu main.dart dan user_registration_form.dart
- Set propreti home ke widget UserRegistrationForm
- Gunakan statefulwidget pada UserRegistrationForm
- Gunakan widget TextFormField untuk inputan, gunakan method validador untuk validasi
- Validasi : inputan email harus menggunakan format @, inputan password dan confirm
password harus sama atau valid - Gunakan method onPressed dan Ketika di pencet akan memanggil _submitForm
Lets goo
berikut adalah kodenya:
import ‘package:flutter/material.dart’;
class UserRegistrationForm extends StatefulWidget {
@override
_UserRegistrationFormState createState() => _UserRegistrationFormState();
}
class _UserRegistrationFormState extends State<UserRegistrationForm> {
final _formKey = GlobalKey<FormState>();
final _nameController = TextEditingController();
final _emailController = TextEditingController();
final _passwordController = TextEditingController();
final _confirmPasswordController = TextEditingController();
@override
void dispose() {
_nameController.dispose();
_emailController.dispose();
_passwordController.dispose();
_confirmPasswordController.dispose();
super.dispose();
}
void _submitForm() {
if (_formKey.currentState!.validate()) {
String name = _nameController.text;
String email = _emailController.text;
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text(“Registrasi berhasil!\nNama: $name\nEmail: $email”)),
);
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text(“Form Pendaftaran”),
backgroundColor: Colors.blue,
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Form(
key: _formKey,
child: ListView(
children: [
// Nama
TextFormField(
controller: _nameController,
decoration: const InputDecoration(
labelText: “Nama”,
border: OutlineInputBorder(),
),
validator: (value) {
if (value == null || value.isEmpty) {
return “Nama tidak boleh kosong”;
}
return null;
},
),
const SizedBox(height: 12),
TextFormField(
controller: _emailController,
decoration: const InputDecoration(
labelText: “Email”,
border: OutlineInputBorder(),
),
keyboardType: TextInputType.emailAddress,
validator: (value) {
if (value == null || value.isEmpty) {
return “Email tidak boleh kosong”;
}
if (!value.contains(“@”)) {
return “Format email tidak valid”;
}
return null;
},
),
const SizedBox(height: 12),
// Password
TextFormField(
controller: _passwordController,
decoration: const InputDecoration(
labelText: “Password”,
border: OutlineInputBorder(),
),
obscureText: true,
validator: (value) {
if (value == null || value.isEmpty) {
return “Password tidak boleh kosong”;
}
if (value.length < 6) {
return “Password minimal 6 karakter”;
}
return null;
},
),
const SizedBox(height: 12),
// Confirm Password
TextFormField(
controller: _confirmPasswordController,
decoration: const InputDecoration(
labelText: “Konfirmasi Password”,
border: OutlineInputBorder(),
),
obscureText: true,
validator: (value) {
if (value == null || value.isEmpty) {
return “Konfirmasi password tidak boleh kosong”;
}
if (value != _passwordController.text) {
return “Password tidak sama”;
}
return null;
},
),
const SizedBox(height: 20),
// Tombol Submit
SizedBox(
width: double.infinity,
child: ElevatedButton(
onPressed: _submitForm,
child: const Text(“Daftar”),
),
),
],
),
),
),
);
}
}
Widget yang ditetapkan
Karena data formulir dapat berubah sesuai dengan input pengguna, formulir pendaftaran pengguna dibuat sebagai widget stateful.
Key Kontrol dan Form
menggunakan TextEditingController untuk semua kolom: nama, email, password, dan konfirmasi password.
Untuk memvalidasi seluruh formulir sekaligus, gunakan GlobalKey<FormState>.
Input dari wilayah
Nama harus diisi.
Email harus diisikan dengan karakter "@".
Password harus memiliki minimal enam karakter.
Konfirmasi Password: Password harus identik dengan yang Anda masukkan.
Validasi dan Kirim
Fungsi _submitForm() dijalankan saat tombol Daftar ditekan.
Aplikasi mengirimkan pesan sukses menggunakan SnackBar dengan nama dan email pengguna jika semua input valid.
User Interface (UI)
menggunakan Scaffold dan AppBar untuk menulis formulir pendaftaran.
Jika layar kecil, ListView digunakan untuk memungkinkan form discroll.
Button yang ditingkatkan berfungsi sebagai tombol aksi.
Berikut Hasilnya:
Berikut jika input dari user tidak sesuai dengan syarat:
