I'd like to show the flutter TextFormField error on top of the input - not below. Can i achieve this with TextFormField itself or do I have to build it myself?
Thank you in advance.
check this code :
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('Custom TextFormField Error'),
),
body: const MyForm(),
),
);
}
}
class MyForm extends StatefulWidget {
const MyForm({Key? key}) : super(key: key);
@override
MyFormState createState() => MyFormState();
}
class MyFormState extends State<MyForm> {
final GlobalKey<FormState> formKey = GlobalKey<FormState>();
String inputValue = '';
String? errorText;
void validateInput(String value) {
setState(() {
errorText = value.isEmpty ? 'This field is required' : null;
});
}
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(16.0),
child: Form(
key: formKey,
child: Column(
children: <Widget>[
if (errorText != null)
Text(
errorText!,
style: const TextStyle(color: Colors.red),
),
TextFormField(
decoration: const InputDecoration(labelText: 'Input Field'),
onChanged: (value) {
validateInput(value);
setState(() {
inputValue = value;
});
},
),
ElevatedButton(
onPressed: () {
formKey.currentState!.validate();
setState(() {
errorText =
inputValue.isEmpty ? 'This field is required' : null;
});
if (formKey.currentState!.validate()) {
// Do something with the valid input
}
},
child: const Text('Submit'),
),
],
),
),
);
}
}