How to align DropdownButton next to a TextField in Flutter?

问题

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.

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

回答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,
          ),
        ),
      ),
    ],
  ),
),

回答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)

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

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

来源：https://stackoverflow.com/questions/57144573/how-to-align-dropdownbutton-next-to-a-textfield-in-flutter