Saltar al contenido

¿Cómo alinear DropdownButton junto a un TextField en Flutter?

Si te encuentras con algo que no comprendes puedes dejarlo en los comentarios y te responderemos tan rápido como podamos.

Solución:

Un poco tarde, pero tuve el mismo problema, aunque con un diseño ligeramente diferente:

  1. solía TextFormField en vez de TextField.
  2. solía DropdownButtonFormField en vez de DropDownButton.
  3. Ambos campos estaban envueltos en Flexible widgets dentro del Rowcon mainAxisSize ajustado a MainAxisSize.min.
  4. Mi campo de texto estaba dispuesto a la izquierda del menú desplegable.

Habiendo dicho eso, ajuste crossAxisAlignment a CrossAxisAlignment.end trabajó para mí.


Prueba esto:

Row(
  mainAxisSize: MainAxisSize.min,  // see 3
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    Flexible(  // see 3
      child: DropdownButtonFormField(  // see 2
        ...
      ),
    ),
    Flexible(
      child: TextFormField(  // see 1
        ...
      ),
    ),
  ],
)

Espero que esto ayude, ¡pero lo hice funcionar! El accesorio clave que lo hizo por mí fue establecer contentPadding para widgets en fila para 0.0

Row(
   children: [
       Flexible(
       flex: 2,
       child: TextFormField(
          keyboardType: TextInputType.number,
          inputFormatters: [
          WhitelistingTextInputFormatter.digitsOnly
          ],
          decoration: InputDecoration(
             labelText: 'Width',
             contentPadding: EdgeInsets.all(0.0),
          ),
          onChanged: (String newValue) 
             _stashItem.width = "$newValue $_widthUnit";
          ,
          )),
          Flexible(
          flex: 1,
          child: DropdownButtonFormField(
          decoration: InputDecoration(
             contentPadding: EdgeInsets.all(0.0)
          ),
          value: _widthUnit,
          items: ['cm', 'm', 'in', 'ft', 'yd']
              .map((String unit) =>
                 DropdownMenuItem(
                   value: unit, child: Text(unit)))
                   .toList(),
          onChanged: (value) => setState(() 
              _widthUnit = value;
          )),
          )
          ],
       ),

Eres capaz de añadir valor a nuestro contenido informacional colaborando tu veteranía en los informes.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *