-
-
Save slightfoot/f0b753606c97d8a2c06659803c12d858 to your computer and use it in GitHub Desktop.
import 'package:flutter/material.dart'; | |
void main() | |
{ | |
final TextEditingController _controller = new TextEditingController(); | |
var items = ['Working a lot harder', 'Being a lot smarter', 'Being a self-starter', 'Placed in charge of trading charter']; | |
runApp( | |
new MaterialApp( | |
title: 'Drop List Example', | |
home: new Scaffold( | |
appBar: new AppBar(title: const Text('Drop List Example')), | |
body: new Center( | |
child: new Container( | |
child: new Column( | |
children: [ | |
new Padding( | |
padding: const EdgeInsets.all(24.0), | |
child: new Row( | |
children: <Widget>[ | |
new Expanded( | |
child: new TextField(controller: _controller) | |
), | |
new PopupMenuButton<String>( | |
icon: const Icon(Icons.arrow_drop_down), | |
onSelected: (String value) { | |
_controller.text = value; | |
}, | |
itemBuilder: (BuildContext context) { | |
return items.map<PopupMenuItem<String>>((String value) { | |
return new PopupMenuItem(child: new Text(value), value: value); | |
}).toList(); | |
}, | |
), | |
], | |
), | |
), | |
], | |
), | |
), | |
), | |
), | |
), | |
); | |
} |
How can make the width of PopupMenuItem full like the dropdownlist?
Don't know if you still need this, but I'm putting it here because maybe someone will need it:
Inside the PopupMenuButton Widget you can add BoxConstraints which can have the minHeight or minWeight set to whatever double value you need.
So Pop Up Menu with a set width of 200:
new PopupMenuButton<String>(
icon: const Icon(Icons.arrow_drop_down),
onSelected: (String value) {
_controller.text = value;
},
constraints: BoxConstraints(minWidth: 200),
itemBuilder: (BuildContext context) {
return items.map<PopupMenuItem<String>>((String value) {
return new PopupMenuItem(child: new Text(value), value: value);
}).toList();
},
),
Or if you want the PopUpMenu to take up all available space just use double.inifity
for example:
new PopupMenuButton<String>(
icon: const Icon(Icons.arrow_drop_down),
onSelected: (String value) {
_controller.text = value;
},
constraints: BoxConstraints(minWidth: double.inifity ),
itemBuilder: (BuildContext context) {
return items.map<PopupMenuItem<String>>((String value) {
return new PopupMenuItem(child: new Text(value), value: value);
}).toList();
},
),
@CoffeeAddicts I also put readOnly to true , because without it , you may replace the value by rewriting the value
TextField(
controller: _controller,
decoration: InputDecoration(
suffixIcon: PopupMenuButton(
icon: const Icon(Icons.arrow_drop_down),
onSelected: (String value) {
_controller.text = value;
},
itemBuilder: (BuildContext context) {
return items
.map<PopupMenuItem>((String value) {
return new PopupMenuItem(
child: new Text(value), value: value);
}).toList();
},
),
),
)
\
Thanks for sharing the code. how to move dropdown icon inside TextField?
@vickyparanjothi use the
decoration
property ofTextField
, and thesuffixIcon
property ofInputDecoration
:TextField( controller: _controller, decoration: InputDecoration( suffixIcon: PopupMenuButton<String>( icon: const Icon(Icons.arrow_drop_down), onSelected: (String value) { _controller.text = value; }, itemBuilder: (BuildContext context) { return items .map<PopupMenuItem<String>>((String value) { return new PopupMenuItem( child: new Text(value), value: value); }).toList(); }, ), ), )
works like a charm bro!!
How can make the width of PopupMenuItem full like the dropdownlist?