0

gracias por leerme. Obtengo este recuadro blanco al mostrar el errorText en un TextFormField:

errorText

Sólo me ocurre en Android, no en Chrome. Y no ocurre siempre, a veces no sale. Otras veces hace un amago de salir medio segundo y se quita. También sale y se va al interactuar con los formularios. He podido comprobar también que si dejo todas las esquinas redondas no da este problema. Es decir, con borderRadius: const BorderRadius.all(Radius.circular(30)), en vez de definir cada esquina.

Éste es el código del widget:

@override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(12.0),
      child: Material(
        color: Colors.transparent,
        elevation: 15.0,
        shadowColor: Colors.white70,
        borderRadius: const BorderRadius.only(
            topRight: Radius.circular(30),
            bottomRight: Radius.circular(30),
            bottomLeft: Radius.circular(30)),
        child: TextFormField(
          controller: controller,
          maxLength: 40,
          decoration: InputDecoration(
            counterText: "",
            fillColor: const Color(0xFFF5EAF3),
            filled: true,
            focusedBorder: const OutlineInputBorder(
              borderRadius: BorderRadius.only(
                  topRight: Radius.circular(30),
                  bottomRight: Radius.circular(30),
                  bottomLeft: Radius.circular(30)),
              borderSide: BorderSide(color: Color(0xFF9b3689)),
            ),
            enabledBorder: const OutlineInputBorder(
              borderRadius: BorderRadius.only(
                  topRight: Radius.circular(30),
                  bottomRight: Radius.circular(30),
                  bottomLeft: Radius.circular(30)),
              borderSide: BorderSide(color: Colors.transparent),
            ),
            errorBorder: const OutlineInputBorder(
              borderRadius: BorderRadius.only(
                  topRight: Radius.circular(30),
                  bottomRight: Radius.circular(30),
                  bottomLeft: Radius.circular(30)),
              borderSide: BorderSide(color: Colors.red),
            ),
            labelText: labelText,
            labelStyle: const TextStyle(color: Colors.black54),
            suffixIcon: controller.text.isNotEmpty
                ? Padding(
                    padding: const EdgeInsetsDirectional.only(end: 10),
                    child: IconButton(
                      onPressed: () => controller.clear(),
                      icon: const Icon(Icons.clear),
                      iconSize: 17,
                      splashRadius: 20,
                      color: Colors.black54,
                    ))
                : null,
          ),
          validator: (value) {
            if (value!.isEmpty) {
              return 'Rellena este campo';
            } else {
              return null;
            }
          },
          onSaved: onSaved,
        ),
      ),
    );
  }

UPDATE

Mi prueba en Chrome y Android de la opción de @diegoveloper que sube la sombra y se sale por arriba y no es lo que quiero:

introducir la descripción de la imagen aquí introducir la descripción de la imagen aquí

1 respuesta 1

0

El problema es que al usar Material + elevation como parent, cuando se muestra el error, eso también forma parte del widget padre, por lo tanto la sombra se alarga y cubre también el mensaje de error.

Se puede mejorar eso usando directamente un DecoratedBox y ajustando la sombra (shadow), así:


DecoratedBox(
                  decoration: const BoxDecoration(
                    borderRadius: BorderRadius.only(
                      topRight: Radius.circular(30),
                      bottomRight: Radius.circular(30),
                      bottomLeft: Radius.circular(30),
                    ),
                    boxShadow: [
                      BoxShadow(
                        color: Colors.black12,
                        blurRadius: 5,
                        // este es el hack para mover la sombra hacia arriba
                        offset: Offset(0.0, -15),
                        spreadRadius: 2,
                      )
                    ],
                  ),
                  child: TextFormField(

introducir la descripción de la imagen aquí

UPDATE

Para la sombra que necesitas quedaría así:

DecoratedBox(
                          decoration: const BoxDecoration(
                            borderRadius: BorderRadius.only(
                              topRight: Radius.circular(30),
                              bottomRight: Radius.circular(30),
                              bottomLeft: Radius.circular(30),
                            ),
                            boxShadow: [
                              BoxShadow(
                                color: Colors.black12,
                                blurRadius: 5,
                                offset: Offset(0, 5),
                                blurStyle: BlurStyle.normal,
                                spreadRadius: 5,
                              )
                            ],
                          ),
                          child: TextFormField(

introducir la descripción de la imagen aquí

4
  • Como te decía, @diegoveloper, sí he probado tu opción pero no es lo que quiero. Sólo sube la sombra como se ve en tu imagen y yo no quiero subirla. Quiero que no salga el recuadro blanco aleatorio. Quiero que quede como en Chrome. Tengo capturas de mi prueba pero aunque edito creo que no salen los cambios porque soy muy nueva.
    – Adularia
    Commented el 26 may. 2022 a las 17:12
  • mira mi respuesta actualizada, es solo jugar con el shadow Commented el 26 may. 2022 a las 17:42
  • 1
    Pues, después de hacer algunas pruebas, efectivamente, al usar 'DecoratedBox' en vez de Material para crear la sombra ya no sale el recuadro blanco. Apunto para el que venga que para crear la sombra igual, dado el caso de 'elevation: 15.0' en Material, necesitas no aplicar 'spreadRadius' y aplicar 'blurRadius: 10'. Muchas gracias, @diegoveloper.
    – Adularia
    Commented el 26 may. 2022 a las 18:52
  • que bueno que te haya servido, te comparto mi canal donde tengo algunos tips : youtube.com/diegoveloper Commented el 26 may. 2022 a las 19:24

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.