error de alineación de visualización de validación de TextFormField flutter

Question

Tengo una TextFormFieldcon validación en Vacío.

Para controlar la altura, TextFormFieldse anidó dentro del Containerwidget.

Lo que causa un efecto secundario inesperado al mostrar la superposición de mensajes de error como imágenes adjuntas.

para probar el código de muestra, presione "Enviar" para ver el 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

Solución 1. Puede configurar helperTextpara el TextField's decorationy aumentar la Containeraltura del 's:

Container(
  height: 60,
  child: TextFormField(
    maxLines: 1,
    decoration: InputDecoration(
      border: OutlineInputBorder(),
      hintText: 'Name',
      helperText: ' ', // this is new
    ),
    validator: (value) => (value.isEmpty) ? '**' : null,
  ),
),

Solución 2. Puede establecer la altura de la línea del mensaje de error en 0 (se mostrará encima del campo de texto):

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

Puedes usar esto

   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

Gracias por la respuesta Mobina ,

Parece que los problemas son la limitación del aleteo. Por ahora, por el momento..

con borde, decido mostrar un mensaje de error en la parte superior. (Tu solución :1)

sin borde puedo mostrar err msg como de costumbre. (Tu solución: 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,
              ),
            ),