C. Langkah-langkah
C.1 Basic Form TextField
1. Buat file dart baru dengan nama form-textfield didalam folder lib
2. Buat tampilan basic form dengan menggunakan Widget TextField untuk inputan, ElevatedButton untuk memberikan event listener. Buat tampilan menggunakan kode program berikut:
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('Basic Form'),
),
body: const MyForm(),
),
);
}
}
class MyForm extends StatefulWidget {
const MyForm({super.key});
@override
State<MyForm> createState() => _MyFormState();
}
class _MyFormState extends State<MyForm> {
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text('Masukkan nama anda :'),
const SizedBox(
height: 10,
),
const TextField(
decoration: InputDecoration(
labelText: 'Nama Lengkap',
hintText: 'Misalnya masnoer',
border: OutlineInputBorder(),
prefixIcon: Icon(Icons.person)),
),
const SizedBox(
height: 20,
),
ElevatedButton(
onPressed: () {},
style: ElevatedButton.styleFrom(
backgroundColor: Colors.amber, foregroundColor: Colors.black),
child: const Text('Tampilkan mama'))
],
),
);
}
}Jika kita run maka akan tampil seperti gambar berikut:
3. Pada class _MyFormState tambahkan kode program berikut:
TextEditingController _textEditingController = TextEditingController();
@override
void dispose() {
_textEditingController.dispose();
super.dispose();
}Penjelasan:
- Line 1 merupakan membuat sebuah variable dari TextEditingController, controller ini berfungsi untuk mengambil inputan dari user.
- Line 2 – 6 merupakan method yang digunakan untuk membersihan text inputan
4. Tambahkan property berikut pada Widget TextField
TextField(
decoration: const InputDecoration(
labelText: 'Nama Lengkap',
hintText: 'Misalnya masnoer',
border: OutlineInputBorder(),
prefixIcon: Icon(Icons.person)),
controller: _textEditingController,
keyboardType: TextInputType.text,
onChanged: (text) {
print('Sedang mengetik teks : ,$text');
},
),Penjelasan:
- Line 7 menambahkan controller _textEditingController
- Line 8 menambahkan property jenis inputan yang boleh diinputkan oleh user
- Line 9 – 11 method yang digunakan untuk event listener Ketika sedang menginputkan teks
5. Tambahkan kode program berikut pada widget ElevatedButton
onPressed: () {
String inputText = _textEditingController.text;
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text('Nama anda adalah , $inputText'))
);
},Penjelasan:
- Line 2 membuat variable inputText yang berfungsi untuk menampung inputan dari keyboard
- Line 2 – 5 menampilkan inputan text dengan menggunakan widget SnackBar
6. Simpan kemudian RUN maka akan tampil seperti gambar berikut:
C.2 Basic Form TextFormField
1. Buat file baru didalam folder lib dengan nama form-textformfield
2. Buat form inputan menggunakan 2 buah widget TextFormField dan 1 buah ElevatedButton, berikut kode program untuk tampilan tersebut.
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text(\"Basic Form TextFormField\"),
),
body: const MyFormText(),
),
);
}
}
class MyFormText extends StatefulWidget {
const MyFormText({super.key});
@override
State<MyFormText> createState() => _MyFormTextState();
}
class _MyFormTextState extends State<MyFormText> {
@override
Widget build(BuildContext context) {
return Column(
children: [
const SizedBox(
height: 10,
),
TextFormField(
decoration: const InputDecoration(
labelText: \"Nama : \", border: OutlineInputBorder()),
),
const SizedBox(
height: 10,
),
TextFormField(
decoration: const InputDecoration(
labelText: \"Email : \", border: OutlineInputBorder()),
),
const SizedBox(
height: 10,
),
SizedBox(
width: double.infinity,
child:
ElevatedButton(onPressed: () {}, child: const Text('Submit')))
],
);
}
}Jika di jalankan maka tampilannya seperti gambar berikut:
3. Tambahkan pada class _MyFormTextState kode berikut:
final _formKey = GlobalKey<FormState>();
final _nameController = TextEditingController();
final _emailController = TextEditingController();
@override
void dispose() {
_nameController.dispose();
_emailController.dispose();
super.dispose();
}
void _submitForm(){
if (_formKey.currentState!.validate()) {
String name = _nameController.text;
String email = _emailController.text;
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text('Validasi $name, $email Berhasil'))
);
}
}Penjelasan:
- Line 1 membuat variable GlobalKey
- Line 2 - 3 membuat controller untuk TextFormField
- Line 5 - 10 method yang berfungsi untuk menghapus inputan name dan email
- Line 12 - 21 method yang digunakan Ketika tombol diklik
4. Pada widget tampilan bungkus menggunakan widget Form dan tambahkan key: _formKey,
5. Ubah kode program pada TextFormField menjadi seperti kode program berikut ini.
TextFormField(
controller: _nameController,
decoration: const InputDecoration(
labelText: \"Nama : \", border: OutlineInputBorder()),
validator: (value){
if (value == null || value.isEmpty) {
return 'Masukkan nama anda';
}
return null;
},
),TextFormField(
controller: _emailController,
decoration: const InputDecoration(
labelText: \"Email : \", border: OutlineInputBorder()),
validator: (value){
if (value == null || value.isEmpty) {
return 'Masukkan email anda ';
}
if(!value.contains('@')){
return 'Email tidak valid';
}
return null;
},
),6. Selanjutnya tambahkan method _submitForm pada method onPressed di ElevatedButton seperti kode program berikut.
SizedBox(
width: double.infinity,
child: ElevatedButton(
onPressed: _submitForm, child: const Text('Submit')))7. Simpan dan RUN maka akan muncul seperti gambar berikut.
