Implementasi Basic Form
Flutter untuk Registrasi Pengguna
Dokumentasi praktikum Flutter yang berfokus pada form pendaftaran pengguna, validasi input, dan proses submit data setelah seluruh field terisi dengan benar.
Ringkasan Praktikum Mobile Application
Praktikum ini membahas dasar pengembangan aplikasi menggunakan Flutter melalui pembuatan form pendaftaran pengguna. Implementasi mencakup penggunaan StatefulWidget, TextEditingController, TextField, TextFormField, validasi form, SnackBar, ElevatedButton, serta pengelolaan state menggunakan setState untuk menangani proses submit.
Flutter Environment
Menyiapkan Flutter SDK dan environment pengembangan serta membuat project Flutter baru.
Basic Form TextField
Membuat field input nama dan data pengguna menggunakan TextField serta controller.
Basic Form TextFormField
Membuat form validasi untuk nama, email, password, dan confirm password.
Submit Form
Menampilkan pesan sukses setelah semua data input valid dan dapat diproses.
1. Instalasi & Konfigurasi Flutter
Tahap awal praktikum adalah menyiapkan environment pengembangan Flutter. Flutter digunakan sebagai framework untuk membangun aplikasi dengan satu codebase yang dapat dijalankan pada berbagai platform.
Tahap ini meliputi instalasi Flutter SDK, konfigurasi PATH, pengecekan environment, dan pengecekan versi Flutter.
flutter doctorflutter --versionPerintah flutter doctor digunakan untuk memeriksa apakah komponen yang dibutuhkan Flutter telah tersedia dan dikonfigurasi dengan benar. Sementara flutter --version digunakan untuk melihat versi Flutter yang terpasang.
Hasil
Environment Flutter berhasil disiapkan sehingga project dapat dibuat dan dijalankan.
2. Membuat Project Flutter
Project praktikum dibuat menggunakan perintah Flutter CLI:
flutter create flutter_application_1Kemudian masuk ke directory project:
cd flutter_application_1Project Flutter memiliki struktur dasar seperti lib, android, ios, web, windows, test, dan pubspec.yaml.
Untuk menjalankan aplikasi:
flutter runUntuk menjalankan file Dart tertentu:
flutter run -d chrome -t lib/form-textfield.dartflutter run -d chrome -t lib/form-textformfield.dartflutter run -d chrome -t lib/user_registration_form.dartPenggunaan -t memungkinkan file Dart tertentu digunakan sebagai entry point aplikasi.
Hasil
Project Flutter berhasil dibuat dan dapat dijalankan pada browser Chrome.
3. Basic Form TextField
Praktikum pertama membuat form input sederhana menggunakan TextField. Implementasi menggunakan StatefulWidget, TextEditingController, TextField, onChanged, ElevatedButton, SnackBar, dan dispose().
TextEditingController digunakan untuk mengambil nilai yang dimasukkan pengguna ke dalam TextField. TextField digunakan untuk menerima input nama lengkap. Konfigurasi TextField mencakup labelText, hintText, OutlineInputBorder, prefix icon person, controller, keyboardType text, dan onChanged.
final TextEditingController _textEditingController =
TextEditingController();
TextField(
controller: _textEditingController,
decoration: const InputDecoration(
labelText: 'Nama Lengkap',
hintText: 'Misalnya urname',
border: OutlineInputBorder(),
),
keyboardType: TextInputType.text,
onChanged: (text) {
print('Sedang mengetik teks: $text');
},
)ElevatedButton(
onPressed: () {
final inputText = _textEditingController.text;
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text('Nama anda adalah, $inputText'),
),
);
},
child: const Text('Tampilkan nama'),
)Controller harus dihapus pada dispose() agar sumber daya tidak menumpuk.
@override
void dispose() {
_textEditingController.dispose();
super.dispose();
}Hasil
Pengguna dapat memasukkan nama lengkap dan menekan tombol untuk menampilkan nama yang dimasukkan melalui SnackBar.
4. Basic Form TextFormField
Praktikum berikutnya menggunakan TextFormField untuk membuat form yang memiliki validasi.
Komponen utama meliputi Form, GlobalKey
final _formKey = GlobalKey();
final _nameController = TextEditingController();
final _emailController = TextEditingController();
GlobalKey
validator: (value) {
if (value == null || value.isEmpty) {
return 'Masukkan nama anda';
}
return null;
}validator: (value) {
if (value == null || value.isEmpty) {
return 'Masukkan email anda';
}
if (!value.contains('@')) {
return 'Email tidak valid';
}
return null;
}Form hanya dapat diproses jika seluruh validator berhasil. Saat validasi berhasil, nama dan email dibaca dari controller dan ditampilkan melalui SnackBar: Validasi $name, $email Berhasil.
Hasil
Form berhasil melakukan validasi nama dan email. Data yang valid kemudian ditampilkan melalui SnackBar.
5. Implementasi User Registration Form
Setelah mempelajari dasar form input, praktikum dilanjutkan dengan membuat form pendaftaran pengguna. Form ini menggunakan TextFormField untuk nama, email, password, dan confirm password, lalu memvalidasi seluruh field sebelum submit dilakukan.
Pada bagian ini, GlobalKey<FormState>, TextEditingController, validator, dan tombol submit digunakan untuk memastikan data yang dikirim sudah benar dan konsisten.
final _formKey = GlobalKey<FormState>();
final _nameController = TextEditingController();
final _emailController = TextEditingController();
final _passwordController = TextEditingController();
final _confirmPasswordController = TextEditingController();void _submitForm() {
if (_formKey.currentState!.validate()) {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(
content: Text('Pendaftaran berhasil!'),
),
);
}
}Saat tombol submit ditekan, aplikasi akan menjalankan validasi. Jika semua form sesuai aturan, maka aplikasi menampilkan pesan sukses kepada pengguna.
Hasil Akhir
Form pendaftaran pengguna berhasil dibuat dan siap menerima input dengan validasi yang tepat.
6. Pengujian
A. Pengujian Data Valid
Nama: Karimah Irsyadiyah
Email: karimahirsyadiyah@gmail.com
Password: 12345678
Status: Berhasil
B. Pengujian Email Tidak Valid
Email: karimahirsyadiyahgmail.com
Expected: Email harus menggunakan format @
Status: Berhasil
C. Pengujian Confirm Password
Password: 12345678
Confirm Password: 87654321
Status: Berhasil menolak submit
D. Pengujian Input Kosong
Action: Kosongkan semua field
Status: Berhasil menampilkan pesan validasi
7. Kesimpulan
Praktikum Mobile Application ini berhasil membuktikan bahwa form pada Flutter dapat dibuat dengan struktur yang rapi dan validasi yang aman. Basic Form memungkinkan aplikasi menerima input dari pengguna secara terarah dan mencegah data tidak valid masuk ke dalam sistem.
Penggunaan TextFormField, validator, dan GlobalKey<FormState> sangat penting untuk membangun form yang responsif, aman, dan mudah dipelihara.
Hasil Akhir
Praktikum berhasil diselesaikan dan form pendaftaran bisa dijalankan dengan validasi yang tepat.
Dokumentasi Hasil
Basic Form – TextField
Basic Form TextFormField
