flutter TextFormField validation display alignment error

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

score 6 · Accepted Answer · answered Aug 26 '20 at 22:02

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

You're very welcome Burak! Glad it helped! @Burak – Mobina Jul 13 '21 at 21:13 — Mobina, Jul 13 '21 at 21:13

score 2 · Answer 2 · answered Aug 26 '20 at 21:44

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

score 0 · Answer 3 · answered Aug 27 '20 at 03:48

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

Mashud Ahmed Talukdar · Answer 4 · 2023-03-27T18:38:13.797

Remove height of container it will work fine. Here is part of my program you can take reference

Container(
                  width: MediaQuery.of(context).size.width / 1.3,
                  child: TextFormField(
                    controller: _username,
                    textAlign: TextAlign.center,
                    decoration: InputDecoration(
                        fillColor: Colors.white,
                        contentPadding: EdgeInsets.all(10.0),
                        isDense: true,
                        focusedBorder: OutlineInputBorder(
                          borderRadius: BorderRadius.circular(45),
                          borderSide: BorderSide(
                              color: Color.fromARGB(255, 6, 36, 8),
                              width: 1.5),
                        ),
                        filled: true,
                        hintText: 'Email ID',
                        border: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(45))),
                    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 "Invalid Email Format";
                      } else {
                        return null;
                      }
                    },
                  ),
                ),

flutter TextFormField validation display alignment error

4 Answers4