0

Necesito como poner 2 TextFormField uno al lado del otro ejemplo:

_dato dato

mi código es el siguiente

body: Container(
        child: SingleChildScrollView(
            padding: const EdgeInsets.all(15),
            child: Form(
              key: _formKey,
              child: Column(children: <Widget>[
                TextFormField(
                  style: const TextStyle(fontSize: 17),
                  decoration: const InputDecoration(
                      labelText: "Nombre(s)",
                      border: OutlineInputBorder()
                  ),
                  textAlign: TextAlign.left, validator: (text) {
                  if (text == null || text.isEmpty) {
                    return 'Campo vacio';
                  }
                  return null;
                },
                ),
                const SizedBox(height: 15,),
                TextFormField(
                  style: const TextStyle(fontSize: 17),
                  decoration: const InputDecoration(
                      labelText: "Apellidos",
                      border: OutlineInputBorder()
                  ),
                  textAlign: TextAlign.left, validator: (text) {
                  if (text == null || text.isEmpty) {
                    return 'Campo vacio';
                  }
                  return null;
                },
                ),
                const SizedBox(height: 15,),
1
  • Usa un row. Revisa el código, ponle formato, así es imposible de leer
    – Manuel
    Commented el 20 dic. 2022 a las 19:41

2 respuestas 2

1

Para poner dos TextFormField uno al lado del otro, puedes usar una fila (Row) y añadir cada TextFormField como un hijo de la fila:

  Row(
  children: [
    Expanded(
      child: TextFormField(
        style: const TextStyle(fontSize: 17),
        decoration: const InputDecoration(
            labelText: "Nombre(s)",
            border: OutlineInputBorder()
        ),
        textAlign: TextAlign.left,
        validator: (text) {
          if (text == null || text.isEmpty) {
            return 'Campo vacio';
          }
          return null;
        },
      ),
    ),
    const SizedBox(width: 15),
    Expanded(
      child: TextFormField(
        style: const TextStyle(fontSize: 17),
        decoration: const InputDecoration(
            labelText: "Apellidos",
            border: OutlineInputBorder()
        ),
        textAlign: TextAlign.left,
        validator: (text) {
          if (text == null || text.isEmpty) {
            return 'Campo vacio';
          }
          return null;
        },
      ),
    ),
  ],
)

También puedes ajustar el tamaño de cada TextFormField usando el widget Expanded, que ocupará todo el espacio disponible en la fila. En este caso, también he añadido un SizedBox con un ancho de 15 entre ambos TextFormField para añadir un poco de espacio entre ellos.

2
  • 1
    Estimado, ¿has probado el código?
    – fredyfx
    Commented el 21 dic. 2022 a las 1:47
  • Muy bueno, gracias por su ayuda
    – alexander
    Commented el 21 dic. 2022 a las 17:40
1

Tienes que usar Row para poder poner Widgets uno al lado del otro, también nos ayudaremos de un Expanded para que el Widget ocupe el espacio necesario, el Expanded tiene una propiedad que es flex, este te ayudará para que puedas ver que Widget quieres que ocupe más espacio, pondremos 1 y 1 en cada uno para que esté equilibrado:

    body: Container(
    child: SingleChildScrollView(
      padding: const EdgeInsets.all(15),
      child: Form(
        key: _formKey,
        child: Column(children: <Widget>[
        Row(
        children: [
          Expanded(
            flex: 1,
            child: TextFormField(
              style: const TextStyle(fontSize: 17),
              decoration: const InputDecoration(
                  labelText: "Nombre(s)", border: OutlineInputBorder()),
              textAlign: TextAlign.left,
              validator: (text) {
                if (text == null || text.isEmpty) {
                  return 'Campo vacio';
                }
                return null;
              },
            ),
          ),
          Expanded(
            flex: 1,
            child: TextFormField(
              style: const TextStyle(fontSize: 17),
              decoration: const InputDecoration(
                  labelText: "Apellidos", border: OutlineInputBorder()),
              textAlign: TextAlign.left,
              validator: (text) {
                if (text == null || text.isEmpty) {
                  return 'Campo vacio';
                }
                 return null;
               },
              ),
             ),
            ],
           ),
          const SizedBox(
           height: 15,
         )
       ]);
      ),
    ),
  );
1
  • Muy útil, gracias por su ayuda
    – alexander
    Commented el 21 dic. 2022 a las 17:41

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.