flutter TextFormField validation display alignment error - validation

Question

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();
},
)
],
),
)),
);
}
}

Answer 1

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,
),
),

Answer 2

You can use this
TextFormField(
decoration: new InputDecoration(
enabledBorder: OutlineInputBorder( //change border of enable textfield
borderRadius: BorderRadius.all(Radius.circular(40.0)),
borderSide: BorderSide(color: colorValue),),
focusedBorder: OutlineInputBorder( //focus boarder
borderRadius: BorderRadius.all(Radius.circular(40.0)),
borderSide: BorderSide(color: colorValue),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(4)),
borderSide: BorderSide(width: 1,color: Colors.red),
),
disabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(4)),
borderSide: BorderSide(width: 1,color: Colors.orange),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(4)),
borderSide: BorderSide(width: 1,color: Colors.green),
),
border: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(4)),
borderSide: BorderSide(width: 1,)
),
errorBorder: OutlineInputBorder(. //error boarder
borderRadius: BorderRadius.all(Radius.circular(4)),
borderSide: BorderSide(width: 1,color: Colors.black)
),
isDense: true,
counterText: "",
contentPadding: EdgeInsets.fromLTRB(10, 20, 10, 0), //padding according to your need
hintText: "create new",
hintStyle: TextStyle(color: colorValue, fontSize: 13)),
)),

Answer 3

Thanks for the answer Mobina,
Seem like issues is flutter limitation. For time being..
with border I decide to display error message on top. (Your solution :1)
without border I can display err msg as usual. (Your solution : 2)
// with border
Container(
height: 38,
margin: EdgeInsets.all(6),
child: TextFormField(
textAlignVertical: TextAlignVertical.bottom,
style: TextStyle(fontSize: 14),
decoration: InputDecoration(
border: OutlineInputBorder(),
hintText: 'Name',
errorStyle: TextStyle(height: 0),
),
validator: (value) => (value.isEmpty) ? 'hide overlap' : null,
),
),
// without border
Container(
height: 38,
margin: EdgeInsets.all(6),
child: TextFormField(
textAlignVertical: TextAlignVertical.bottom,
style: TextStyle(fontSize: 14),
decoration: InputDecoration(
hintText: 'Name',
helperText: ' ', isDense: true,
counterText: "",
contentPadding: EdgeInsets.fromLTRB(10, 30, 10, 0),
),
validator: (value) => (value.isEmpty) ? 'hide overlap' : null,
),
),