Dalam penggunaan Form, semua data input akan divalidasi pada saat form melakukan proses submit. Namun, beberapa kondisi dapat divalidasi pada setiap TextFormField dengan menggunakan widget bernama validator.
Widget Validator menggunakan fungsi dengan parameter yang berisi nilai dari setiap input dan kemudian memeriksa kondisi yang diberikan dalam fungsi validator. Key digunakan di sini karena mungkin ada banyak input yang perlu diproses, sehingga untuk menghubungkan pohon widget dengan pohon elemen, key bertipe FormState akan digunakan.
Contoh:
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: const HomePage(),
theme: ThemeData(
brightness: Brightness.dark,
),
);
}
}
class HomePage extends StatefulWidget {
const HomePage({super.key});
@override
State createState() => _HomePageState();
}
class _HomePageState extends State {
final _formKey = GlobalKey();
var isLoading = false;
void _submit() {
final isValid = _formKey.currentState!.validate();
if (!isValid) {
return;
}
_formKey.currentState!.save();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("Nextgen Tutorial"),
centerTitle: true,
),
//body
body: Padding(
padding: const EdgeInsets.all(16.0),
//form
child: Form(
key: _formKey,
child: Column(
children: [
const Text(
"Validasi Form di Flutter ",
style: TextStyle(fontSize: 24.0, fontWeight: FontWeight.bold),
),
//styling
SizedBox(
height: MediaQuery.of(context).size.width * 0.1,
),
TextFormField(
decoration: const InputDecoration(labelText: 'Email'),
keyboardType: TextInputType.emailAddress,
onFieldSubmitted: (value) {
//Validator
},
validator: (value) {
if (value!.isEmpty ||
!RegExp(r"^[a-zA-Z0-9.a-zA-Z0-9.!#$%&'*+-/=?^_`{|}~]+@[a-zA-Z0-9]+\.[a-zA-Z]+")
.hasMatch(value)) {
return 'Masukkan email yang valid!';
}
return null;
},
),
//box styling
SizedBox(
height: MediaQuery.of(context).size.width * 0.1,
),
//text input
TextFormField(
decoration: const InputDecoration(labelText: 'Password'),
keyboardType: TextInputType.emailAddress,
onFieldSubmitted: (value) {},
obscureText: true,
validator: (value) {
if (value!.isEmpty) {
return 'Masukkan Password yang valid!';
}
return null;
},
),
SizedBox(
height: MediaQuery.of(context).size.width * 0.1,
),
ElevatedButton(
child: const Text(
"Submit",
),
onPressed: () => _submit(),
)
],
),
),
),
);
}
}
Output:
Tutorial sebelumnya : Lottie Animation Di Flutter
Tutorial setelahnya : Gestures Di Flutter
Semua Tutorial Flutter : Tutorial Flutter