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

Thanks, Have managed to display data.
Now how do i increase the width of the PopUpMenuItem

can we make focus action detector in Popumenu item, basically what we want is, a user types in the text field and the list in the popupmenuitem filters the list, also in case , user wants to scroll/select using arrow keys, he/she can do it.

Quick assistance is appreciated....

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

I have created a Textfield in similar way, But the data is not getting stored in firestore(firebase)

You should put this on pub.dev. The packages which do the same thing there are trash and their sizes are all fixed. Thanks

can we make focus action detector in Popumenu item, basically what we want is, a user types in the text field and the list in the popupmenuitem filters the list, also in case , user wants to scroll/select using arrow keys, he/she can do it.

Quick assistance is appreciated....

can any one assit

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

thanks bro it worked for me too...😊😊😊

I want to show a popup list right below a textfield. How can I trigger popup items using textfield "onchange" property? Can anyone assist?

You can use the dropdownfield package Although it is not null safe.. Or you can use this widget. "PopMenuButton"

…

On Fri, 24 Sep 2021, 2:56 pm Humayun Rahi, ***@***.***> wrote: ***@***.**** commented on this gist. ------------------------------ I want to show a popup list right below a textfield. How can I trigger popup items using textfield "onchange" property? Can anyone assist? — You are receiving this because you commented. Reply to this email directly, view it on GitHub <https://gist.github.com/f0b753606c97d8a2c06659803c12d858#gistcomment-3903669>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AQT3JDVWPOGAE47JXDPQCLLUDRDOPANCNFSM4LDVVLPQ> .

you are welcome On Sat, Sep 25, 2021 at 7:44 AM ismail shah ***@***.***> wrote:

…

***@***.**** commented on this gist. ------------------------------ You can use the dropdownfield package Although it is not null safe.. Or you can use this widget. "PopMenuButton" On Fri, 24 Sep 2021, 2:56 pm Humayun Rahi, ***@***.***> wrote: > ***@***.**** commented on this gist. > ------------------------------ > > I want to show a popup list right below a textfield. How can I trigger > popup items using textfield "onchange" property? Can anyone assist? > > — > You are receiving this because you commented. > Reply to this email directly, view it on GitHub > < https://gist.github.com/f0b753606c97d8a2c06659803c12d858#gistcomment-3903669 >, > or unsubscribe > < https://github.com/notifications/unsubscribe-auth/AQT3JDVWPOGAE47JXDPQCLLUDRDOPANCNFSM4LDVVLPQ > > . > — You are receiving this because you commented. Reply to this email directly, view it on GitHub <https://gist.github.com/f0b753606c97d8a2c06659803c12d858#gistcomment-3904637>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ASR3JNFWC36YF4YB5TYC663UDVOTHANCNFSM4LDVVLPQ> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>.

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