es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Flutter – ¿Cómo crear un borde en un campo de texto al validar?

25 Jul, 2023 Programación 
TextField(
              style: AppTextStyle.textStyleRegular,
              controller: controller,
              cursorHeight: 24,
              keyboardType: TextInputType.multiline,
              maxLines: numberOfLines,
              minLines: numberOfLines,
              decoration: InputDecoration(
                errorText: 'Por favor, proporciona un título',
                contentPadding: const EdgeInsets.all(10.0),
                border: InputBorder.none,
                focusedBorder: InputBorder.none,
                enabledBorder: InputBorder.none,
                errorBorder: const OutlineInputBorder(
                  borderRadius: BorderRadius.all(Radius.circular(4)),
                  borderSide: BorderSide(width: 3, color: Colors.red),
                ),
                focusedErrorBorder: const OutlineInputBorder(
                  borderRadius: BorderRadius.all(Radius.circular(4)),
                  borderSide: BorderSide(width: 3, color: Colors.red),
                ),
                disabledBorder: InputBorder.none,
              ),
            )

enter image description here

Por alguna razón, el borde no se ajusta completamente al campo de texto. Cambiar la cadena de error a una cadena vacía no ayuda. Puedo prescindir del mensaje de error, pero el borde debería cubrir perfectamente el campo de texto.

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    El fragmento de código proporcionado muestra la implementación de un widget TextField con varios parámetros configurados para su decoración. El problema mencionado es que el borde no cubre completamente el TextField, incluso cuando no se muestra ningún mensaje de error.

    Para solucionar este problema, podemos intentar establecer la propiedad borderRadius de InputDecoration en cero, lo que elimina cualquier esquina redondeada y asegura un borde rectangular perfecto. El código de decoración actualizado sería el siguiente:

    decoration: InputDecoration(
  errorText: 'Por favor proporciona un título',
  contentPadding: const EdgeInsets.all(10.0),
  border: OutlineInputBorder(
    borderRadius: BorderRadius.zero,
  ),
  focusedBorder: InputBorder.none,
  enabledBorder: InputBorder.none,
  errorBorder: const OutlineInputBorder(
    borderRadius: BorderRadius.zero,
    borderSide: BorderSide(width: 3, color: Colors.red),
  ),
  focusedErrorBorder: const OutlineInputBorder(
    borderRadius: BorderRadius.zero,
    borderSide: BorderSide(width: 3, color: Colors.red),
  ),
  disabledBorder: InputBorder.none,
),

    Al establecer borderRadius: BorderRadius.zero para todos los tipos de borde, aseguramos que el TextField esté completamente cubierto por un borde rectangular. Esto debería resolver el problema de que el borde no se adapte completamente al TextField.

Comments are closed.