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:
- I used
TextFormField
rather thanTextField
. - I used
DropdownButtonFormField
rather thanDropDownButton
. - Both fields were wrapped in
Flexible
widgets within theRow
, withmainAxisSize
set toMainAxisSize.min
. - 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;
})),
)
],
),