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

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

Answer 2

Try this:

Container(
  decoration: BoxDecoration(
    border: Border(
      //TODO: Customize the underline here
      bottom: BorderSide(
        color: Colors.white70,
        width: 0.5,
      ),
    ),
  ),
  child: Row(
    crossAxisAlignment: CrossAxisAlignment.center,
    children: [
      DropdownButton<String>(
        onChanged: (c) {},
        underline: Container(),
        items: [
          DropdownMenuItem<String>(
            child: Text('Email'),
          )
        ],
      ),
      Flexible(
        child: TextField(
          decoration: InputDecoration(
            border: InputBorder.none,
          ),
        ),
      ),
    ],
  ),
),

Answer 3

I ended up editing the padding of the TextField's content, and used CrossAxisAlignment.center instead of CrossAxisAlignment.start:

  Row(
    crossAxisAlignment: CrossAxisAlignment.center,
    children: <Widget>[
      DropdownButton<String>(
        ...
      ),
      Flexible(
        child: TextField(
          decoration: InputDecoration(
            contentPadding: EdgeInsets.all(6.0),
          ),
        ),
      ),
    ],
  )

Result:

(You see space between them due to a SizedBox added)

Answer 4

Try this:

Row(
    Row(mainAxisAlignment: MainAxisAlignment.end, crossAxisAlignment: CrossAxisAlignment.end
    children: <Widget>[
      Expanded(
        flex: 1
        child: ButtonTheme(
                   alignedDropdown: true,
                   child: DropdownButton<String>(
        ...
      ))),
       Expanded(
         flex: 6
         child: TextField(
          ...
        ),
      ),
    ],
  )

Answer 5

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