How to align DropdownButton next to a TextField in Flutter?

Question

I would like to vertically align a DropdownButton right next to a TextField.

  Row(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: <Widget>[
      DropdownButton<String>(
        ...
      ),
      Flexible(
        child: TextField(
          ...
        ),
      ),
    ],
  )

The current behavior is:

As you can see, the bottom lines aren't aligned. I guess that's happening due to a differences in height. What would be a good practice to fix that? (I'm guessing not using a fixed height)

---

My final goal is something like this:

Where both lines and the text of DropdownButton and TextField are vertically aligned.

Answer 1

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;
          })),
          )
          ],
       ),

Answer 2

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(), ...)
    ),
 )