0

Tengo dentro del container mi textFormField y quiero mostrar validaciones segun la interaccion del usuario fuera del container pues no puedo guardarlo en una variable por que esta solo toma el primewr valor y no se actualiza


Column(
      children: [
        Row(
          children: [
            Text(
              First Name *',
              style: TextStyle(color:Theme.of(context).colorScheme.primary,
                fontFamily: 'Montserrat',
                fontSize: 15,
                ),
             ),
             const Expanded(child: SizedBox()),
           ],
         ),
         Container(padding:const EdgeInsets.only(left: 10.0),
         margin: const EdgeInsets.only(top: 10.0, bottom: 20.0),
         decoration: BoxDecoration(
         borderRadius: BorderRadius.circular(10),
         border: Border.all(color: const Color.fromRGBO(0, 96, 128, 1))),
         child: TextFormField(
           validator: ( value ){
             if(value!.isEmpty){
               return "Enter First Name";
             }
             if(value.length < 2 || value.length > 25){
               return "very long last name !";
             }
             else{
               return null;
             }
           },
           onChanged: (text) {
             setState(() => firstName = text);
           },
           style: const TextStyle(color: Colors.black),
           decoration: const InputDecoration(
           border: InputBorder.none,
           hintStyle: TextStyle(color: Colors.black87),
          ),
        maxLines: null,
      ),
    )
  ],

como podria mostrar los mensajes del validator en fuera del container para no dañar su diseño Quiero que el texto del validator este fuera del container y se actualice de la misma forma),para que no se redimencione el container

1 respuesta 1

1

Cuando usas el validator del TextFormField por defecto te agrega el mensaje de error dentro de ese widget, si quieres manejarlo separado, tendrías que cambiar un poco el código.

Ejemplo:

  String firstName = '';
  String? errorFirstName;
  final _formKey = GlobalKey<FormState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('LOGIN'),
      ),
      body: Form(
        key: _formKey,
        child: Column(
          children: [
            Row(
              children: [
                Text(
                  'First Name *',
                  style: TextStyle(
                    color: Theme.of(context).colorScheme.primary,
                    fontFamily: 'Montserrat',
                    fontSize: 15,
                  ),
                ),
                const Expanded(child: SizedBox()),
              ],
            ),
            Container(
              padding: const EdgeInsets.only(left: 10.0),
              margin: const EdgeInsets.only(top: 10.0, bottom: 20.0),
              decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(10),
                  border:
                      Border.all(color: const Color.fromRGBO(0, 96, 128, 1))),
              child: Center(
                child: TextFormField(
                  validator: (value) {
                    if (value!.isEmpty) {
                      errorFirstName = "Enter First Name";
                    }
                    if (value.length < 2 || value.length > 25) {
                      errorFirstName = "very long last name !";
                    }
                    return null;
                  },
                  onChanged: (text) {
                    setState(() => firstName = text);
                  },
                  style: const TextStyle(color: Colors.black),
                  decoration: const InputDecoration(
                    border: InputBorder.none,
                    hintStyle: TextStyle(color: Colors.black87),
                  ),
                  maxLines: null,
                ),
              ),
            ),
            if (errorFirstName != null)
              Text(
                errorFirstName!,
                style: const TextStyle(
                  color: Colors.red,
                ),
              ),
            const SizedBox(height: 20),
            MaterialButton(
              child: const Text('VALIDATE'),
              onPressed: () {
                setState(() {
                  _formKey.currentState!.validate();
                });
              },
            ),
          ],
        ),
      ),
    );
  }

Al validator se le retorna null para que no agregue ningún mensaje y ese texto de error lo asignas a una variable de error que crees, en este caso usé errorFirstName.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.