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

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

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

Comments

[Mobina]

You're very welcome Burak! Glad it helped! @Burak