How to align DropdownButton next to a TextField in Flutter?

A bit late, but I had the same issue albeit with a slightly different layout:

  1. I used TextFormField rather than TextField.
  2. I used DropdownButtonFormField rather than DropDownButton.
  3. Both fields were wrapped in Flexible widgets within the Row, with mainAxisSize set to MainAxisSize.min.
  4. My text field was laid out to the left of the dropdown.

That being said, setting crossAxisAlignment to CrossAxisAlignment.end worked for me.


Try this:

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

I am not sure whether this solution helps you or not, but I think its better than using row.

 TextField(
    decoration: InputDecoration(
       prefix: DropdownButton(underline: Container(), ...)
    ),
 )

Hope this helps but I got it working! Key prop that did it for me was setting contentPadding for widgets in row to 0.0

Row(
   children: <Widget>[
       Flexible(
       flex: 2,
       child: TextFormField(
          keyboardType: TextInputType.number,
          inputFormatters: <TextInputFormatter>[
          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<String>(
                   value: unit, child: Text(unit)))
                   .toList(),
          onChanged: (value) => setState(() {
              _widthUnit = value;
          })),
          )
          ],
       ),