Flutter Drop List Example with TextField

main.dart

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

thank you

How can make the width of PopupMenuItem full like the dropdownlist?

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 of TextField, and the suffixIcon property of InputDecoration:

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!!