Menggunakan TextField, Validasi dan Mengirim Data di Flutter

Share:
Menggunakan TextField, Validasi dan Mengirim Data di Flutter
Halo semuanya, kembali lagi di sahretech. Pada kesempatan kali ini kita akan belajar bagaimana cara menggunakan textfield, validasi dan cara parsing data ke halaman lainnya. Penasaran?, ayo ikuti penjelasannya di bawah ini.


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.sahretech.com/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.

Cara Membuat TextField di Flutter
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 sahretech. Sekian dan sampai jumpa.

No comments

Jangan lupa kasih komentar ya!. Karena komentar kalian membantu kami menyediakan informasi yang lebih baik