here is my data list from api

  Future<String> getSWData() async {
    var res = await http .get(Uri.encodeFull(url), headers: {"Accept": "application/json"});
    var resBody = json.decode(res.body);

    setState(() {
      data = resBody;
    });

    return "Sucess";
  }
`
```
and here is my dropdown 

 ```
 children: <Widget>[
             SearchableDropdown.single(
             hint:Text("Select Country"),
              isExpanded: true,
          items: data.map((item) {
            return  DropdownMenuItem(
             
              child:  Text(item['name']),
              value: item['id'].toString(),
            );
      
          }).toList(),
          onChanged: (newVal) {
            setState(() {
              _countryname = newVal;
              city.clear();
              _myState=null;
              this.getCity(int.parse(_countryname));
            });
          },
          value:_countryname,
        ),
         ],
```

it's load data from api but when i search i m not getting search data is there is any extra step for search? the package should be dynamic like jquery select2

I tried to use the package with a model class, but when I search, it doesn't appear in the list. Do you have a model example? Or does this plugin really not support it?

My code:

class FabricanteOleo {
  String nome;
  int id;

  FabricanteOleo({this.nome, this.id});

  FabricanteOleo.fromJson(json) {
    nome = json['nome'];
    id = json['id'];
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    data['nome'] = this.nome;
    data['id'] = this.id;
    return data;
  }
}

 _dropSearch() {
    return new SearchableDropdown<FabricanteOleo>(
      isCaseSensitiveSearch: true,
      items: listaFabricantes.map((fab){
        return DropdownMenuItem<FabricanteOleo>(
          child: new Text(fab.nome),
          value: fab,
        );
      }).toList(),
      value: fabricanteOleoSelecionado,
      hint: new Text('Select One'),
      searchHint: new Text(
        'Select One',
        style: new TextStyle(fontSize: 20),
      ),
      onChanged: (FabricanteOleo value) {
        setState(() {
          this.fabricanteOleoSelecionado = value;
        });
      },
    );

Column( children: [

            Padding(
              padding: const EdgeInsets.only(top: 14),
              child: new TextField(

                // maxLengthEnforced: true,
                keyboardType: TextInputType.multiline,
                controller: controller1,
                decoration: new InputDecoration(
                  // contentPadding: EdgeInsets.symmetric(vertical: 26,horizontal: 10),
                    border: OutlineInputBorder(),
                    hintText: "Add Task name Only",
                    labelText: "Add Task name only"
                ),
              ),
            ),
            new SizedBox(
                height:6
            ),

            Column(
              children: <Widget>[

                Row(
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: <Widget>[
                    new Text("Select Product:", style: new TextStyle(fontSize: 12),),
                  ],
                ),

                Container(

                  height: 50,
                  width: MediaQuery.of(context).size.width,
                  decoration: ShapeDecoration(

                    shape: RoundedRectangleBorder(

                      side: BorderSide(width: 1.0, style: BorderStyle.solid, color: Colors.blue),
                      borderRadius: BorderRadius.all(Radius.circular(5.0)),
                    ),
                  ),
                  child: Padding(
                    padding: const EdgeInsets.symmetric(horizontal:10.0),
                    child: StatefulBuilder(
                      //stream: null,
                        builder: (BuildContext context, StateSetter setState) {
                          /*  return  DropdownButton<String>(
                            //  hint: Text('Project'),
                              value:applicationDropDown,
                              isExpanded: true,

                              // style: Theme.of(context).textTheme.title,
                              //  icon: Icon(Icons.arrow_drop_down,color: Colors.lightBlue,),

                              onChanged: (String newValue) {
                                setState(() {
                                  applicationDropDown = newValue;
                                });


                              },
                              items: applicationList.cast<String>()

                                  .map<DropdownMenuItem<String>>((String value) {
                                return DropdownMenuItem<String>(
                                  value: value,
                                  child: Text(value),

                                );
                              })
                                  .toList()
                          );        */

                          return SearchableDropdown.single(
                            items: applicationList.cast<String>()

                                .map<DropdownMenuItem<String>>((String value) {
                              return DropdownMenuItem<String>(
                                value: value,
                                child: Text(value, ),

                              );
                            })
                                .toList(),
                            value: applicationDropDown,
                            hint: "Select one",
                            searchHint: "Select one",
                            onChanged: (value) {
                              setState(() {
                                applicationDropDown = value;
                              });
                            },
                            isExpanded: true,
                            // label: "Select Project",

                            selectedValueWidgetFn: (item) {
                              return Container(
                                  transform: Matrix4.translationValues(-10,0,0),
                                  alignment: Alignment.centerLeft,
                                  child: (Text(item.toString())));
                            },

                            // style: Theme.of(context).textTheme.title,
                            displayClearIcon: false,

                          );
                        }
                    ),
                  ),
                ),
              ],
            ),


            Padding(
              padding: const EdgeInsets.only(top:7.0),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.start,
                children: <Widget>[
                  Column(
                    //  mainAxisAlignment: MainAxisAlignment.start,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      new Text("Select Customer:", style: new TextStyle(fontSize: 12),),

                      Container(

                        height: 50,
                        width: MediaQuery.of(context).size.width/2,
                        decoration: ShapeDecoration(

                          shape: RoundedRectangleBorder(

                            side: BorderSide(width: 1.0, style: BorderStyle.solid, color: Colors.blue),
                            borderRadius: BorderRadius.all(Radius.circular(5.0)),
                          ),
                        ),
                        child: Padding(
                          padding: const EdgeInsets.symmetric(horizontal:10.0),
                          child: StatefulBuilder(
                            //stream: null,
                              builder: (BuildContext context, StateSetter setState) {
                                return SearchableDropdown.single(
                                  items: projectList.cast<String>()

                                      .map<DropdownMenuItem<String>>((String value) {
                                    return DropdownMenuItem<String>(
                                      value: value,
                                      child: Text(value, ),

                                    );
                                  })
                                      .toList(),
                                  value: projectDropDown,
                                  hint: "Select one",
                                  searchHint: "Select one",
                                  onChanged: (value) {
                                    setState(() {
                                      projectDropDown = value;
                                    });
                                  },
                                  isExpanded: true,
                                  // label: "Select Project",

                                  selectedValueWidgetFn: (item) {
                                    return Container(
                                        transform: Matrix4.translationValues(-10,0,0),
                                        alignment: Alignment.centerLeft,
                                        child: (Text(item.toString())));
                                  },


                                  // style: Theme.of(context).textTheme.title,
                                  displayClearIcon: false,

                                );
                              }
                          ),
                        ),
                      ),
                    ],

in this code whenever i select any dropdown value cursor move to the add task textfiled. Is there any way to solve this problem. SO that cursor do not move to the textfiled again and again.

will be thankful for your help

I have using searchable_dropdown lib, every thing working but searching option not working properly.I am sharing code with some screenshots, lease check help me.

Container( padding: EdgeInsets.all(10.0), child: SearchableDropdown.single( items: _dropdownMenuItemsCamp, value: selectCamp, displayClearIcon: false, isCaseSensitiveSearch: true, hint: "Select Compaign Type *", label: Text( "Select Compaign Type *", style: TextStyle(color: Colors.black54), ), searchHint: "Select Compaign Type *", onChanged: (value) { setState(() { selectCamp = value; }); campType = selectCamp.generalID; }, underline: Container( height: 1.0, decoration: BoxDecoration( border: Border( bottom: BorderSide( color: Colors.black38, width: 1.0))), ), searchFn: (String keyword, items) { List ret = List(); if (keyword != null && items != null && keyword.isNotEmpty) { keyword.split(" ").forEach((k) { int i = 0; items.forEach((item) { if (k.isNotEmpty && (item.value .toString() .toLowerCase() .contains(k.toLowerCase()))) { ret.add(i); } i++; }); }); } if (keyword.isEmpty) { ret = Iterable.generate(items.length).toList(); } return (ret); }, isExpanded: true, ), )

Label and error returned by function as Widget:

      validator: (value){return(value==null?Row(
        children: <Widget>[
          Icon(Icons.error,color: Colors.red,size: 14,),
          SizedBox(width: 5,),
          Text("Mandatory",style: TextStyle(color: Colors.red,fontSize: 13),),
        ],
      ):null);},
      label: (value){return(Row(
        children: <Widget>[
          Icon(Icons.info,color: Colors.blueAccent,size: 14,),
          SizedBox(width: 5,),
          Text("Oil producer",style: TextStyle(color: Colors.blueAccent,fontSize: 13),),
        ],
      ));},

Or as strings:

      validator: (value){return(value==null?"Mandatory":null);},
      label: (value){return("Oil producer");},

Possibility to set the keyboard type for searches as follows:

keyboardType: TextInputType.number,

New searchFn lets the developer define the search function through which the list items are filtered. For example, the string typed by the user can be considered as keywords separated by spaces:

      searchFn: (String keyword, List<DropdownMenuItem<MyData>> items) {
        List<int> ret = List<int>();
        if (keyword != null && items != null) {
          keyword.split(" ").forEach((k) {
            int i = 0;
            items.forEach((item) {
              if (keyword.isEmpty || (k.isNotEmpty &&
                  (item.value.toString().toLowerCase().contains(k.toLowerCase())))) {
                ret.add(i);
              }
              i++;
            });
          });
        }
        if(keyword.isEmpty){
          ret = Iterable<int>.generate(items.length).toList();
        }
        return (ret);
      },

Here is an example of result:

Multiple selection

Multiple selection is available through the multipleSelection parameter:

multipleSelection: true,

This disables onChanged callback function. See below.

There is a way to customize the display of the selected and unselected items through the displayItemWhenMultiple parameter function:

      displayItemWhenMultiple: (item,selected) {
        return (Row(children: [
          selected ? Icon(Icons.check, color: Colors.green,) : Icon(
            Icons.check_box_outline_blank, color: Colors.grey,),
          SizedBox(width: 7),
          item
        ]));
      },

The done button is displayed only when in multiple selection mode. It can be customized either by setting the String parameter doneText or by setting the function parameter doneButtonFn:

doneText: "OK",

Or:

      doneButtonFn: (newContext){return FlatButton(
          onPressed: () {
            Navigator.pop(newContext);
          }, child: Text("I'm through"));},

The multiple items set by default can be set through the parameter selectedItems as follows:

  List<int> selectedItems = [1,3];
...
      selectedItems: selectedItems,

Where the int values are the indexes of the selected items in the list of items.

Once the selection is done, the selectedItems list above is updated or the values can be retrieved through the onChangedMultiple function parameter:

      onChangedMultiple: (List<int> selectedIndexes){
        selectedIndexes.forEach((item){
          print("selected index: $item");
        });
      },

The indexes of the selected items are sent to this callback function. Note that in the multiple selection case, the onChanged callback function is not called as the parameter type is not a list.

The validator function can also be used in the multiple selection case:

validator: (List<int>selectedIndexes){return(selectedIndexes==null||selectedIndexes.length==0?"Mandatory":null);},

The selectedValueWidgetFn function can be used in the mutiple selection case the same way it is used in the single selection case:

      selectedValueWidgetFn: (value) => Padding(
          padding: EdgeInsets.fromLTRB(20, 20, 20, 20),
          child:Text(
            value.toString(),
            style: TextStyle(color:Colors.green),
          )
      ),

The clear button works the same way in multiple and single cases.

Ran:

flutter format lib/searchable_dropdown.dart

As suggested here: https://pub.dev/packages/searchable_dropdown#-analysis-tab-

Improved package description as suggested here: https://pub.dev/packages/searchable_dropdown#-analysis-tab- Increased version from 1.1.0 to 1.1.1

Added to the README.md file:

• Values of the DropdownMenuItem objects must be strings or implement the toString() method.
• Clear button.
• Assert unique value can be avoided.
• Label
• Validator
• Search keyboard
• Search function

I use your demo,i had this problen, family: Roboto, size: 15.0, weight: 400, baseline: ideographic, decoration: TextDecoration.none, softWrap: wrapping at box width, overflow: clip): 'package:searchable_dropdown/searchable_dropdown.dart': Failed assertion: line 90 pos 12: 'widget.value == null || widget.items.where((DropdownMenuItem item) => item.value == widget.value).length == 1': is not true.

Hello,

When I set a preselected value via "value" I am unable to select other values as the selected value is always the preselected one.

                    child: SearchableDropdown.single(
                        value: "USD",
                        items: ["USD", "EUR", "CHF", "HUF"]

Hi, my problem is when i try to select value in searchable dropdown second time then it is not changing remaining same as that in case of ist change , but i can select different value after clearing the value .

code:

SearchableDropdown.single( items: widget.projectList.cast()

                                      .map<DropdownMenuItem<String>>((String value) {
                                    return DropdownMenuItem<String>(
                                      value: value,
                                      child: Text(value),

                                    );
                                  })
                                      .toList(),
                                  value: dropDownValue,
                                  hint: "Select one",
                                  searchHint: "Select one",
                                  onChanged: (value) {
                                    setState(() {
                                      dropDownValue = value;
                                    });
                                  },
                                  isExpanded: true,
                                  // label: "Select Project",
                                  selectedValueWidgetFn: (item) {
                                    return Container(
                                        transform: Matrix4.translationValues(-10,0,0),
                                        alignment: Alignment.centerLeft,
                                        child: (Text(item.toString())));
                                  },


                                  // style: Theme.of(context).textTheme.title,
                               //   displayClearIcon: false,

                                );

and this code is working perfect in stateless widget but problem coming in stateful widget.

i will be thankful for your solution

Hello @icemanbsi ,

Thanks for searchable_dropdown!

This pull request proposes 2 things:

• Close button label text: optionally change the "Close" text of the search dialog for example to allow translation.
• Clear button: optionally add a clear button [X] on the right of the dropdown as requested by @Laban1 here: https://github.com/icemanbsi/searchable_dropdown/issues/5

For the clear button:

• By default, it is not displayed
• It is active if and only if a value is selected
• The default icon [X] can be given as a parameter
• A callback function (onClear) can be given as a parameter and is called when the user clicks on the clear button

Instead of filter value from DropdownMenuItem, I think it is better to add query builder which allow user to customize any filter list. For example:

        SearchableDropdown(
              dataList: operators,
              queryBuilder: (String keyword, List<OperatorModel> list) {
                List<int> shownIndexes = [];
                int i = 0;
                list.forEach((item) {
                  if(keyword.isEmpty || item.opeCode.toLowerCase().contains(keyword.trim().toLowerCase())
                      || item.opeName.toLowerCase().contains(keyword.trim().toLowerCase())
                      || item.opeNameEn.toLowerCase().contains(keyword.trim().toLowerCase())){
                    shownIndexes.add(i);
                  }
                  i++;
                });
                return shownIndexes;
              },
              items: operators.map((operator) {
                return DropdownMenuItem<int>(
                  child: Text(operator.opeCode + "-" + operator.opeName),
                  value: operator.opeId
                ); 
              }).toList(),
              value: selectedOperatorId,
              hint: new Text('Select One'),
              searchHint: new Text('Select One', style: new TextStyle(fontSize: 20)),
              onChanged: (value) {
                setState(() {
                  selectedOperatorId = value;
                });
              },
              isExpanded: true,
            )

/C:/src/flutter/.pub-cache/hosted/pub.dartlang.org/searchable_dropdown-1.1.3/lib/searchable_dropdown.dart:371:41: Error: The getter 'subhead' isn't defined for the class 'TextTheme'.

• 'TextTheme' is from 'package:flutter/src/material/text_theme.dart' ('/C:/src/flutter/packages/flutter/lib/src/material/text_theme.dart'). Try correcting the name to the name of an existing getter, or defining a getter or field named 'subhead'. ? Theme.of(context).textTheme.subhead ^^^^^^^ /C:/src/flutter/.pub-cache/hosted/pub.dartlang.org/searchable_dropdown-1.1.3/lib/searchable_dropdown.dart:374:16: Error: The getter 'subhead' isn't defined for the class 'TextTheme'.

• 'TextTheme' is from 'package:flutter/src/material/text_theme.dart' ('/C:/src/flutter/packages/flutter/lib/src/material/text_theme.dart'). Try correcting the name to the name of an existing getter, or defining a getter or field named 'subhead'. .subhead ^^^^^^^ /C:/src/flutter/.pub-cache/hosted/pub.dartlang.org/searchable_dropdown-1.1.3/lib/searchable_dropdown.dart:832:25: Error: The getter 'FlatButton' isn't defined for the class '_DropdownDialogState'.

• '_DropdownDialogState' is from 'package:searchable_dropdown/searchable_dropdown.dart' ('/C:/src/flutter/.pub-cache/hosted/pub.dartlang.org/searchable_dropdown-1.1.3/lib/searchable_dropdown.dart'). Try correcting the name to the name of an existing getter, or defining a getter or field named 'FlatButton'. return (FlatButton.icon( ^^^^^^^^^^ /C:/src/flutter/.pub-cache/hosted/pub.dartlang.org/searchable_dropdown-1.1.3/lib/searchable_dropdown.dart:993:17: Error: The method 'FlatButton' isn't defined for the class '_DropdownDialogState'.

• '_DropdownDialogState' is from 'package:searchable_dropdown/searchable_dropdown.dart' ('/C:/src/flutter/.pub-cache/hosted/pub.dartlang.org/searchable_dropdown-1.1.3/lib/searchable_dropdown.dart'). Try correcting the name to the name of an existing method, or defining a method named 'FlatButton'. FlatButton( ^^^^^^^^^^ Error: Cannot run with sound null safety, because the following dependencies don't support null safety:

• package:searchable_dropdown

For solutions, see https://dart.dev/go/unsound-null-safety

ERROR STACK

../../../snap/flutter/common/flutter/.pub-cache/hosted/pub.dartlang.org/searchable_dropdown-1.1.3/lib/searchable_dropdown.dart:371:41: Error: The getter 'subhead' isn't defined for the class 'TextTheme'.

• 'TextTheme' is from 'package:flutter/src/material/text_theme.dart' ('../../../snap/flutter/common/flutter/packages/flutter/lib/src/material/text_theme.dart'). Try correcting the name to the name of an existing getter, or defining a getter or field named 'subhead'. ? Theme.of(context).textTheme.subhead ^^^^^^^

../../../snap/flutter/common/flutter/.pub-cache/hosted/pub.dartlang.org/searchable_dropdown-1.1.3/lib/searchable_dropdown.dart:374:16: Error: The getter 'subhead' isn't defined for the class 'TextTheme'.

• 'TextTheme' is from 'package:flutter/src/material/text_theme.dart' ('../../../snap/flutter/common/flutter/packages/flutter/lib/src/material/text_theme.dart'). Try correcting the name to the name of an existing getter, or defining a getter or field named 'subhead'. .subhead ^^^^^^^ FAILURE: Build failed with an exception.

• Where: Script '/home/user/snap/flutter/common/flutter/packages/flutter_tools/gradle/flutter.gradle' line: 1005

• What went wrong: Execution failed for task ':app:compileFlutterBuildDebug'.

Process 'command '/home/user/snap/flutter/common/flutter/bin/flutter'' finished with non-zero exit value 1

• Try: Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

• Get more help at https://help.gradle.org

BUILD FAILED in 31s Exception: Gradle task assembleDebug failed with exit code 1

Flutter Doctor Doctor summary (to see all details, run flutter doctor -v): [✓] Flutter (Channel stable, 2.5.1, on Ubuntu 20.04.3 LTS 5.11.0-34-generic, locale en_GB.UTF-8) [!] Android toolchain - develop for Android devices (Android SDK version 30.0.2) ✗ cmdline-tools component is missing Run path/to/sdkmanager --install "cmdline-tools;latest" See https://developer.android.com/studio/command-line for more details. ✗ Android license status unknown. Run flutter doctor --android-licenses to accept the SDK licenses. See https://flutter.dev/docs/get-started/install/linux#android-setup for more details. [✓] Chrome - develop for the web [✓] Android Studio (version 2020.3) [!] Android Studio ✗ android-studio-dir = /snap/android-studio/current/android-studio ✗ Android Studio not found at /snap/android-studio/current/android-studio [✓] VS Code (version 1.60.0) [✓] Connected device (2 available)

! Doctor found issues in 2 categories.

fix /usr/local/Caskroom/flutter/2.0.2/flutter/.pub-cache/hosted/pub.dartlang.org/searchable_dropdown-1.1.3/lib/searchable_dropdown.dart:371:41: Error: The getter 'subhead' isn't defined for the class 'TextTheme'. - 'TextTheme' is from 'package:flutter/src/material/text_theme.dart' ('/usr/local/Caskroom/flutter/2.0.2/flutter/packages/flutter/lib/src/material/text_theme.dart'). Try correcting the name to the name of an existing getter, or defining a getter or field named 'subhead'. ? Theme.of(context).textTheme.subhead

Thank you for really helpful flutter package. I think there is an important feature missing which is debounce. When user search in list it immediately invkoing the searchFn which is a performance issue.

It will be more helpful, if there is an option for setting a property for search delay like debounce:500 or delay:500 where 500 is milliseconds value.