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

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