Form input adalah hal umum yang biasa kita temui di berbagai aplikasi, baik di aplikasi mobile, desktop maupun apliksi web. Form input di flutter dinamakan dengan textfield, cara menggunakan textfield di flutter cukup mudah dan kalian wajib tahu bagaimana cara menggunakannya, karena hal ini adalah wajib sebagai fungsi untuk mengirim data ke database.
Di flutter kita bisa menggunakan widget form, di dalam form terdapat key untuk mengidentifikasi form tersebut, dan di dalam form ini juga kita bebas menentukan widget yang akan dipakai. Biasanya widget yang dipakai adalah textfield dan button.
Ok, pada kesempatan kali ini kita akan membuat sebuah project flutter sederhana. Terdapat 2 halaman, pertama halaman yang menampilkan 2 buah textfield dan 1 button. Lalu di halaman ke dua, terdapat text hasil input yang kita buat sebelumnya. Selain itu kita akan mengimplementasikan validasi sederhana pada textfield yang dibuat. Di tutorial ini kalian akan belajar.
⦿ form dan textfield
⦿ validasi pada textfield
⦿ elevated button
⦿ cara berpindah halaman dengan membawa parameter
⦿ Dan widget lainnya.
Cara Menggunakan TextField, Validasi dan Kirim Data di Flutter
1. Buatlah sebuah project baru flutter di visual studio code. Caranya tekan ctrl + shift + P → flutter new project → pilih folder → beri nama project "latihan_text_field".2. Buka file main.dart lalu ganti script di dalamnya dengan script yang ada di bawah ini. Untuk penjelasannya sudah saya tulis di dalam script dan di dalam tabel penjelas.
import 'package:flutter/material.dart';
import 'detail_page.dart';
void main() {
runApp(MaterialApp(
title: "Belajar Form Flutter",
home: BelajarForm(),
));
}
class BelajarForm extends StatefulWidget {
@override
_BelajarFormState createState() => _BelajarFormState();
}
class _BelajarFormState extends State<BelajarForm> {
final _formKey = GlobalKey<FormState>();
final name = TextEditingController();
final alamat = TextEditingController();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("BelajarFlutter.com"),
),
// untuk membuat form input tambahakan widget form()
body: Form(
// key adalah kunci unik untuk mengidentifikasi suatu form
// di bawah key ini tambahkan widget sesuai selera kalian
key: _formKey,
child: Container(
padding: EdgeInsets.all(20.0),
child: Column(
//agar semua widget diposisi kiri
crossAxisAlignment: CrossAxisAlignment.start,
children: [
//textformfield digunakan untuk membuat widget form
TextFormField(
//memberikan identitas untuk setiap form
controller: name,
decoration: InputDecoration(
hintText: "Ketik nama lengkap anda",
labelText: "Nama Lengkap",
),
//memberikan validasi jika form kosong
validator: (value) {
if (value!.isEmpty) {
return 'Nama tidak boleh kosong';
}
return null;
},
),
//memberikan jarak
SizedBox(height: 15),
TextFormField(
controller: alamat,
keyboardType: TextInputType.multiline,
maxLines: null,
decoration: InputDecoration(
labelText: 'Alamat',
hintText: 'Ketik alamat lengkap anda'
),
validator: (value) {
if (value!.isEmpty) {
return 'Alamat tidak boleh kosong';
}
return null;
},
),
SizedBox(height: 15),
//membuat button untuk mengirim dataw
ElevatedButton(
child: Text(
"Submit",
style: TextStyle(color: Colors.white),
),
onPressed: () {
//jika data lengkap maka kirim data ke halaman selanjutnya
if (_formKey.currentState!.validate()) {
Navigator.push(
context,
MaterialPageRoute(
//name.text adalah parameter yang dikirim
//alamat.text adalah paramter yang dikirim
builder: (_) => DetailPage(name: name.text, alamat: alamat.text,)
)
);
}
},
)
],
),
),
),
);
}
}Tabel Penjelas
| # | Syntax/Script | Keterangan |
| 1 | Form(.....) | Widget untuk membuat form, semua textfield akan digrouping di dalam widget ini. Widget ini nantinya akan diberi key unik. Menggunakan form ini kita dapat mengambil dan memavlidasi textfield nantinya. |
| 2 | key: _formKey | key adalah kunci unik untuk mengidentifikasi suatu form . di bawah key ini tambahkan widget sesuai selera kalian |
| 3 | crossAxisAlignment: CrossAxisAlignment.start, | Properti dari widget column, berfungsi untuk membuat column ke kiri |
| 4 | TextFormField(…..) | Membuat textfield, terdapat beberapat properti di dalamnya |
| 5 | controller: name | Untuk memberikan penamaan pada textfield, dan name adalah variabel yang berisi value saat kita ketik |
| 6 | validator: (value) { if (value!.isEmpty) { return 'Nama tidak boleh kosong'; } return null; }, | Membuat validasi. Untuk mengambil data yang diketika gunakan value. Di dalam validator ini kalian bebas membuat validasi sesuai dengan selera. Bisa untuk validasi email, numeric, password, dll. |
| 7 | keyboardType: TextInputType.multiline, maxLines: null, | Membuat textfield dapat memiliki banyak baris. Maxlines: null membuat textfield tidak memiliki baris terbatas |
| 8 | if (_formKey.currentState!.validate()) { ….. } | Jika validasi tidak memiliki masalah, maka eksekusi baris setelahnya |
| 9 | Navigator.push(…...) | Perintah untuk berpindah ke halaman lain. Disini saya menggunakan parameter, sehingga variabel bisa dikirimkan ke halaman setelahnya. Variabel adalah hasil dari textfield. Untuk pembahasan Navigator.push(…..) kalian bisa mengikuti tutorialnya di link berikut ini https://www.fromsunda.eu.org/2022/02/cara-mudah-berpindah-halaman-di-flutter.html |
3. Selanjutnya buatlah sebuah file baru dengan nama detail_page.dart di dalam folder lib. Lalu copy script di bawah ini dan paste ke dalam file tersebut.
import 'package:flutter/material.dart';
class DetailPage extends StatelessWidget {
//required artinya paramter wajib diisi saat dipanggil di halaman lain
DetailPage({required this.name, required this.alamat});
String name;
String alamat;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Detail Page"),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
//menampilkan nama
Text(name),
//menampilkan alamat
Text(alamat)
],
)
),
);
}
}4. Ok, semua tahap sudah kita kerjakan saatnya melakukan uji coba. Jika berhasil maka tampilannya akan tampak seperti gambar di bawah ini.
 |
| Hasil Akhir |
Keren!, sampe disini kalian sudah belajar banyak hal tentang flutter terutama cara menggunakan textfield. Kalian bisa melakukan improvisasi dengan menambahkan widget flutter lainnya. Ikuti list tutorial flutter berikut ini untuk belajar banyak hal lain tentang flutter.
Ok sekian tutorial carar menggunakna textfield, validasi, dan mengirim data di flutter. Semoga bermanfaat. Jika ada yang merasa kesulitan, silahkan tinggalkan pesan kalian di bawah ini atau tanya langsung di fanspage tulisan saya. Sekian dan sampai jumpa.
Posting Komentar