How to implement drop down list in flutter

Question

I have a list of locations that i want to implement as a dropdown list in Flutter  Im pretty new to the language  Here s what i have done   new DropdownButton    value   selectedLocation    onChanged   String newValue        setState             selectedLocation   newValue              items   locations map  String location      return new DropdownMenuItem lt String gt        child  new Text location           toList      This is my list of items   List lt String gt   locations     A    B    C    D      And I am getting the following error   Another exception was thrown   package flutter src material dropdown dart   Failed assertion  line 468 pos 15   value    null    items where  DropdownMenuItem lt T gt  item    gt  item value    value  length    1   is not true    I assume the value of  selectedLocation is getting null  But i am initialising it like so   String  selectedLocation    Please choose a location

User · Answer

Use StatefulWidget and setState to update dropdown        String  dropDownValue      override   Widget build BuildContext context        return DropdownButton        hint   dropDownValue    null             Text  Dropdown               Text                 dropDownValue                style  TextStyle color  Colors blue                        isExpanded  true        iconSize  30 0        style  TextStyle color  Colors blue         items    One    Two    Three   map           val              return DropdownMenuItem lt String gt               value  val              child  Text val                                   toList          onChanged   val            setState                              dropDownValue   val                                                initial state of dropdown     Open dropdown and select value     Reflect selected value to dropdown

User · Answer

You can use DropDownButton class in order to create drop down list             String dropdownValue    One           Widget build BuildContext context    return Scaffold    body  Center      child  DropdownButton lt String gt         value  dropdownValue        onChanged   String newValue            setState                dropdownValue   newValue                             items   lt String gt   One    Two    Free    Four              map lt DropdownMenuItem lt String gt  gt   String value            return DropdownMenuItem lt String gt             value  value            child  Text value                       toList                             please refer to this flutter web page

User · Answer

Try this  new DropdownButton lt String gt     items   lt String gt   A    B    C    D   map  String value        return new DropdownMenuItem lt String gt         value  value        child  new Text value               toList      onChanged

User · Answer

You need to add value  location in your code to work it  Check this out   items   locations map  String location      return new DropdownMenuItem lt String gt        child  new Text location        value  location          toList

User · Answer

you have to take this into account  from DropdownButton docs        The items must have distinct values and if value isn t null it must   be among them     So basically you have this list of strings  List lt String gt   locations     A    B    C    D      And your value in Dropdown value property is initialised like this   String  selectedLocation    Please choose a location     Just try with this list   List lt String gt   locations     Please choose a location    A    B    C    D      That should work     Also check out the  hint  property if you don t want to add a String like that  out of the list context   you could go with something like this   DropdownButton lt int gt             items  locations map  String val                       return new DropdownMenuItem lt String gt                           value  val                          child  new Text val                                                      toList              hint  Text  Please choose a location              onChanged   newVal                       selectedLocation   newVal                    this setState

User · Answer

Let say we are creating a drop down list of currency   List  currency     INR    USD    SGD    EUR    PND    List lt DropdownMenuItem lt String gt  gt   dropDownMenuCurrencyItems  String  currentCurrency   List lt DropdownMenuItem lt String gt  gt  getDropDownMenuCurrencyItems       List lt DropdownMenuItem lt String gt  gt  items   new List      for  String currency in  currency        items add        new DropdownMenuItem value  currency  child  new Text currency           return items     void changedDropDownItem String selectedCurrency      setState           currentCurrency   selectedCurrency            Add below code in body part   new Row children   lt Widget gt     new Text  Currency        new Container      padding  new EdgeInsets all 16 0          new DropdownButton      value   currentCurrency      items   dropDownMenuCurrencyItems      onChanged  changedDropDownItem

User · Answer

The error you are getting is due to ask for a property of a null object  Your item must be null so when asking for its value to be compared you are getting that error  Check that you are getting data or your list is a list of objects and not simple strings

User · Answer

I was facing a similar issue with the DropDownButton when i was trying to display a dynamic list of strings in the dropdown  I ended up creating a plugin    flutter search panel  Not a dropdown plugin  but you can display the items with the search functionality   Use the following code for using the widget        FlutterSearchPanel          padding  EdgeInsets all 10 0           selected   a           title   Demo Search Page           data    This    is    a    test    array            icon  new Icon Icons label  color  Colors black           color  Colors white          textStyle  new TextStyle color  Colors black  fontWeight  FontWeight bold  fontSize  20 0  decorationStyle  TextDecorationStyle dotted           onChanged   value              print value

User · Answer

place the value inside the items then it will work   new DropdownButton lt String gt                 items  dropitems map  String val                   return DropdownMenuItem lt String gt                     value  val                    child  new Text val                                       toList                  hint Text  SelectdType                 onChanged  String val                    SelectdType  val                  setState

User · Answer

Use this code  class PlayerPreferences extends StatefulWidget     final int numPlayers    PlayerPreferences  this numPlayers        override    PlayerPreferencesState createState     gt   PlayerPreferencesState       class  PlayerPreferencesState extends State lt PlayerPreferences gt      int dropDownValue   0     override   Widget build BuildContext context        return Container        child  DropdownButton          value  dropDownValue          onChanged   int newVal             setState                  dropDownValue   newVal                                   items              DropdownMenuItem              value  0              child  Text  Yellow                           DropdownMenuItem              value  1              child  Text  Red                           DropdownMenuItem              value  2              child  Text  Blue                           DropdownMenuItem              value  3              child  Text  Green                                                   and in the main body we call as class ModeSelection extends StatelessWidget     override   Widget build BuildContext context        return Scaffold        body  SafeArea          child  Container            child  PlayerPreferences

User · Answer

For anyone interested to implement a DropDown of custom class you can follow the bellow steps   Suppose you have a class called Language with the following code and a static method which returns a List lt Language gt  class Language     final int id    final String name    final String languageCode     const Language this id  this name  this languageCode         const List lt Language gt  getLanguages    lt Language gt           Language 1   English    en            Language 2            fa            Language 3           ps              Anywhere you want to implement a DropDown you can import the Language class first use it as follow     DropdownButton          underline  SizedBox            icon  Icon                      Icons language                      color  Colors white                                 items  getLanguages map  Language lang            return new DropdownMenuItem lt String gt                           value  lang languageCode                          child  new Text lang name                                                   toList             onChanged   val                          print val

User · Answer

When I ran into this issue of wanting a less generic DropdownStringButton  I just created it   dropdown string button dart  import  package flutter material dart      Subclass of DropdownButton based on String only values     Yes  I know Flutter discourages subclassing  but this seems to be    a reasonable exception where a commonly used specialization can be    made more easily usable        Usage      DropdownStringButton items    A    B    C    value   A   onChanged   string         class DropdownStringButton extends DropdownButton lt String gt      DropdownStringButton       Key key   required List lt String gt  items  value  hint  disabledHint       required onChanged  elevation   8  style  iconSize   24 0  isDense   false      isExpanded   false            assert items    null    value    null    items where  String item    gt  item    value  length    1           super            key  key            items  items map  String item                return DropdownMenuItem lt String gt  child  Text item   value  item                toList            value  value  hint  hint  disabledHint  disabledHint  onChanged  onChanged          elevation  elevation  style  style  iconSize  iconSize  isDense  isDense          isExpanded  isExpanded

User · Answer

If you don t want the Drop list to show up like a popup  You can customize it this way just like me  it will show up as if on the same flat  see image below    After expand   Please follow the steps below  First  create a dart file named drop list model dart  import  package flutter material dart    class DropListModel     DropListModel this listOptionItems      final List lt OptionItem gt  listOptionItems     class OptionItem     final String id    final String title     OptionItem   required this id   required this title       Next  create file file select drop list dart  import  package flutter material dart   import  package time keeping model drop list model dart   import  package time keeping widgets src core internal dart    class SelectDropList extends StatefulWidget     final OptionItem itemSelected    final DropListModel dropListModel    final Function OptionItem optionItem  onOptionSelected     SelectDropList this itemSelected  this dropListModel  this onOptionSelected       override    SelectDropListState createState     gt   SelectDropListState itemSelected  dropListModel      class  SelectDropListState extends State lt SelectDropList gt  with SingleTickerProviderStateMixin      OptionItem optionItemSelected    final DropListModel dropListModel     AnimationController expandController    Animation lt double gt  animation     bool isShow   false      SelectDropListState this optionItemSelected  this dropListModel       override   void initState         super initState        expandController   AnimationController          vsync  this          duration  Duration milliseconds  350             animation   CurvedAnimation        parent  expandController        curve  Curves fastOutSlowIn              runExpandCheck           void  runExpandCheck         if isShow          expandController forward          else         expandController reverse                  override   void dispose         expandController dispose        super dispose            override   Widget build BuildContext context        return Container        child  Column          children   lt Widget gt             Container              padding  const EdgeInsets symmetric                  horizontal  15  vertical  17               decoration  new BoxDecoration                borderRadius  BorderRadius circular 20 0                 color  Colors white                boxShadow                    BoxShadow                      blurRadius  10                      color  Colors black26                      offset  Offset 0  2                                               child  new Row                mainAxisSize  MainAxisSize max                crossAxisAlignment  CrossAxisAlignment center                children   lt Widget gt                   Icon Icons card travel  color  Color 0xFF307DF1                     SizedBox width  10                    Expanded                      child  GestureDetector                        onTap                               this isShow    this isShow                           runExpandCheck                            setState                                                                                  child  Text optionItemSelected title  style  TextStyle                            color  Color 0xFF307DF1                             fontSize  16                                                              Align                    alignment  Alignment 1  0                     child  Icon                      isShow   Icons arrow drop down   Icons arrow right                      color  Color 0xFF307DF1                       size  15                                                                                                 SizeTransition                axisAlignment  1 0                sizeFactor  animation                child  Container                  margin  const EdgeInsets only bottom  10                     padding  const EdgeInsets only bottom  10                     decoration  new BoxDecoration                      borderRadius  BorderRadius only bottomLeft  Radius circular 20   bottomRight  Radius circular 20                        color  Colors white                      boxShadow                          BoxShadow                            blurRadius  4                            color  Colors black26                            offset  Offset 0  4                                                                 child   buildDropListOptions dropListModel listOptionItems  context                                           Divider color  Colors grey shade300  height  1                                     Column  buildDropListOptions List lt OptionItem gt  items  BuildContext context        return Column        children  items map  item    gt   buildSubMenu item  context   toList                  Widget  buildSubMenu OptionItem item  BuildContext context        return Padding        padding  const EdgeInsets only left  26 0  top  5  bottom  5         child  GestureDetector          child  Row            children   lt Widget gt               Expanded                flex  1                child  Container                  padding  const EdgeInsets only top  20                   decoration  BoxDecoration                    border  Border top  BorderSide color  Colors grey 200   width  1                                       child  Text item title                      style  TextStyle                          color  Color 0xFF307DF1                           fontWeight  FontWeight w400                          fontSize  14                       maxLines  3                      textAlign  TextAlign start                      overflow  TextOverflow ellipsis                                                                   onTap                 this optionItemSelected   item            isShow   false            expandController reverse              widget onOptionSelected item                                      Initialize value  DropListModel dropListModel   DropListModel  OptionItem id   quot 1 quot   title   quot Option 1 quot    OptionItem id   quot 2 quot   title   quot Option 2 quot      OptionItem optionItemSelected   OptionItem id  null  title   quot Ch n quy n truy c p quot     Finally use it  SelectDropList             this optionItemSelected              this dropListModel               optionItem                    optionItemSelected   optionItem                      setState

User · Answer

It had happened to me when I replace the default value with a new dynamic value  But  somehow your code may be dependent on that default value  So try keeping a constant with default value stored somewhere to fallback   const defVal    abcd   String dynVal   defVal      dropdown list whose value is dynVal that keeps changing with onchanged    when rebuilding or setState        dynVal   defVal     rebuilding here

User · Answer

Change  List lt String gt   locations     A    B    C    D      To   List lt String gt   locations     selectedLocation   A    B    C    D       selectedLocation needs to be part of your item List

User · Answer

For the solution  scroll to the end of the answer   First of all  let s investigate what the error says  I have cited the error that s thrown with Flutter 1 2  but the idea is the same       Failed assertion  line 560 pos 15   items    null    items isEmpty    value    null    items where  DropdownMenuItem item     item value    value  length    1   is not true    There are four or conditions  At least one of them must be fulfilled    Items  a list of DropdownMenuItem widgets  were provided  This eliminates items    null  Non-empty list was provided  This eliminates items isEmpty  A value   selectedLocation  was also given  This eliminates value    null  Note that this is DropdownButton s value  not DropdownMenuItem s value    Hence only the last check is left  It boils down to something like      Iterate through DropdownMenuItem s  Find all that have a value that s equal to  selectedLocation  Then  check how many items matching it were found  There must be exactly one widget that has this value  Otherwise  throw an error    The way code is presented  there is not a DropdownMenuItem widget that has a value of  selectedLocation  Instead  all the widgets have their value set to null  Since null     selectedLocation  last condition fails  Verify this by setting  selectedLocation to null - the app should run   To fix the issue  we first need to set a value on each DropdownMenuItem  so that something could be passed to onChanged callback    return DropdownMenuItem      child  new Text location       value  location       The app will still fail  This is because your list still does not contain  selectedLocation s value  You can make the app work in two ways    Option 1  Add another widget that has the value  to satisfy items where  DropdownMenuItem lt T gt  item    gt  item value    value  length    1   Might be useful if you want to let the user re-select Please choose a location option  Option 2  Pass something to hint  paremter and set selectedLocation to null  to satisfy value    null condition   Useful if you don t want Please choose a location to remain an option    See the code below that shows how to do it   import  package flutter material dart    void main       runApp Example        class Example extends StatefulWidget      override   State lt StatefulWidget gt  createState     gt   ExampleState       class  ExampleState extends State lt Example gt        List lt String gt   locations     Please choose a location    A    B    C    D       Option 1     String  selectedLocation    Please choose a location      Option 1   List lt String gt   locations     A    B    C    D       Option 2   String  selectedLocation     Option 2     override   Widget build BuildContext context        return MaterialApp        home  Scaffold          body  Center            child  DropdownButton              hint  Text  Please choose a location       Not necessary for Option 1             value   selectedLocation              onChanged   newValue                  setState                       selectedLocation   newValue                                               items   locations map  location                  return DropdownMenuItem                  child  new Text location                   value  location                                  toList

[drop-down-menu] How to implement drop down list in flutter?

Examples related to drop-down-menu

Examples related to dart

Examples related to flutter