I have a TextFormField
with validation on Empty.
In order to control height, TextFormField
was nested inside Container
widget.
Which cause unexpected side effect of displaying error message overlap as attached pictures.
to test sample code, press "Submit" to see error.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: SimpleForm(),
);
}
}
class SimpleForm extends StatelessWidget {
@override
Widget build(BuildContext context) {
final formKey = GlobalKey<FormState>();
return SafeArea(
child: Scaffold(
// primary: true,
body: Form(
key: formKey,
child: Column(
children: [
SizedBox(
height: 0,
),
// Container(height: 0,),
Container(
height: 38,
margin: EdgeInsets.all(6),
child: TextFormField(
maxLines: 1,
decoration: InputDecoration(
border: OutlineInputBorder(),
hintText: 'Name',
// errorStyle: TextStyle(fontSize: 0, height: 0),
),
validator: (value) => (value.isEmpty) ? '**' : null,
),
),
FlatButton(
child: Text('Submit'),
onPressed: () {
formKey.currentState.validate();
},
)
],
),
)),
);
}
}
Solution 1. You can set helperText
for the TextField
's decoration
and increase the Container
's height:
Container(
height: 60,
child: TextFormField(
maxLines: 1,
decoration: InputDecoration(
border: OutlineInputBorder(),
hintText: 'Name',
helperText: ' ', // this is new
),
validator: (value) => (value.isEmpty) ? '**' : null,
),
),
Solution 2. You can set the line height of the error message to 0 (it will be displayed above the text field):
Container(
height: 38,
child: TextFormField(
maxLines: 1,
decoration: InputDecoration(
border: OutlineInputBorder(),
hintText: 'Name',
errorStyle: TextStyle(height: 0), // this is new
),
validator: (value) => (value.isEmpty) ? '**' : null,
),
),