In BOTTOM_SHEET mode + DIALOG mode, when the keyboard is turned on, it will automatically push the list up
But in "Menu" mode the keyboard is almost completely covered

I am building a chained drop down menu, i want if the value of parent changes the children drop down menu should automatically invoked.
how to do this ?

value is reset if i call the setstate function

Is there a way to customize the "No data found" text?
I can't seem to find it, but I need to change it to something in my language (pt).

Here is a screenshot
https://tppr.me/teye1

One letter differece confuses a little bit)

Observed result

The invocation of Navigator.of(context).pushNamed within the onChanged method of DropdownSearch has no effect. Only after calling it a second time it executes the navigation.

Expected result

When a value has been selected, I would like to navigate to another page.

Steps to reproduce

Here is the minimal example for what I tried to build:

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: DropdownSearch<String>(
          hint: 'Please select something',
          items: ['Two'],
          onChanged: (item) {
            Navigator.of(context).pushNamed('/2');
            Navigator.of(context).pushNamed('/2');
          },
        ),
      ),
    );
  }
}

The complete code for this minimal navigation example can be found here:

https://github.com/jmewes/navigation_example/blob/master/lib/main.dart

Environment

Tested with Flutter for the web.

Question

Could you please help me to understand what is the problem here?

Customising the dropdownBuilder does not change the height of the dropdown_search widget. It basically just changes the width of the displayed/selected item. There are lots of trailing padding around the widget which seems to make it look bigger in terms of height.
This is when i make the dropdownbuilder have a very small height, it basically did not affect the height of the widget itself.

From the image below

You can see that with the same text style the dropdown search has a bigger height than the password textfield below.

If i try to reduce the height of the widget by putting it in a container and squashing the height, the dropdown button goes out of place, look at the screenshot below

Unfortunately ListView does not have scroll into index functionality.
The possible workaround is https://stackoverflow.com/a/58435822
it works for fixed height items, so for most of the dropdown cases should be fine.
At least it should be possible to pass ScrollController as parameter to DropdownSearch.

I want when I open Dropdown, the disabled items will be gray and will not be selectable?

Hi, is there any way to customize the font size of the selected item?

It would be nice if this widget allows multiple selection.

I am getting an error if I use this control directly within MaterialApp builder

  @override
  Widget build(BuildContext context) {
    return StreamBuilder<User>(
      stream: Modular.get<AuthService>().onAuthStateChanged,
      builder: (_, AsyncSnapshot<User> snapshot) {
        if (snapshot.connectionState == ConnectionState.active) {
          final bool isAuthenticated = snapshot.data != null;

          return MaterialApp(
            title: 'Example App',
            theme: _themeData(),
            initialRoute: isAuthenticated ? '/accounts' : '/login',
            builder: (context, child) {
              return MasterPage(      <--- dropdown_search is located within the MasterPage
                child: child,
                isAuthenticated: isAuthenticated,
              );
            },
            navigatorKey: Modular.navigatorKey,
            onGenerateRoute: (settings) =>
                AppRouting(isAuthenticated).generateRoute(settings),
          );
        }

        return Container();
      },
    );
  }

I have placed the dropdown_search widget within the MasterPage as I want the dropdown search control to be persistent so that when I push to navigator this won't get rendered.

This render fine but when I press the dropdown and I get the following error

TypeError: Cannot read property 'context' of null
at _DropdownSearchState.new.[_openMenu] (http://127.0.0.1:8080/packages/dropdown_search/src/selectDialog.dart.lib.js:3455:72)
at _DropdownSearchState.new._selectSearchMode (http://127.0.0.1:8080/packages/dropdown_search/src/selectDialog.dart.lib.js:3485:34)
at _selectSearchMode.next ()
at runBody (http://127.0.0.1:8080/dart_sdk.js:37699:34)
at Object._async [as async] (http://127.0.0.1:8080/dart_sdk.js:37730:7)
at _DropdownSearchState.new.[_selectSearchMode] (http://127.0.0.1:8080/packages/dropdown_search/src/selectDialog.dart.lib.js:3482:22)
at http://127.0.0.1:8080/packages/dropdown_search/src/selectDialog.dart.lib.js:3405:307
at tap.TapGestureRecognizer.new.invokeCallback (http://127.0.0.1:8080/packages/flutter/src/gestures/recognizer.dart.lib.js:189:18)
at tap.TapGestureRecognizer.new.handleTapUp (http://127.0.0.1:8080/packages/flutter/src/gestures/tap.dart.lib.js:395:40)
at tap.TapGestureRecognizer.new.[_checkUp] (http://127.0.0.1:8080/packages/flutter/src/gestures/tap.dart.lib.js:201:12)
at tap.TapGestureRecognizer.new.handlePrimaryPointer (http://127.0.0.1:8080/packages/flutter/src/gestures/tap.dart.lib.js:148:23)
at tap.TapGestureRecognizer.new.handleEvent (http://127.0.0.1:8080/packages/flutter/src/gestures/recognizer.dart.lib.js:448:16)
at pointer_router.PointerRouter.new.[_dispatch] (http://127.0.0.1:8080/packages/flutter/src/gestures/pointer_router.dart.lib.js:74:9)
at http://127.0.0.1:8080/packages/flutter/src/gestures/pointer_router.dart.lib.js:109:26
at LinkedMap.new.forEach (http://127.0.0.1:8080/dart_sdk.js:24816:11)
at pointer_router.PointerRouter.new.[_dispatchEventToRoutes] (http://127.0.0.1:8080/packages/flutter/src/gestures/pointer_router.dart.lib.js:106:29)
at pointer_router.PointerRouter.new.route (http://127.0.0.1:8080/packages/flutter/src/gestures/pointer_router.dart.lib.js:98:37)
at binding$5.WidgetsFlutterBinding.new.handleEvent (http://127.0.0.1:8080/packages/flutter/src/gestures/binding.dart.lib.js:306:26)
at binding$5.WidgetsFlutterBinding.new.dispatchEvent (http://127.0.0.1:8080/packages/flutter/src/gestures/binding.dart.lib.js:289:24)
at binding$5.WidgetsFlutterBinding.new.dispatchEvent (http://127.0.0.1:8080/packages/flutter/src/rendering/layer.dart.lib.js:5973:13)
at binding$5.WidgetsFlutterBinding.new.[_handlePointerEventImmediately] (http://127.0.0.1:8080/packages/flutter/src/gestures/binding.dart.lib.js:260:14)
at binding$5.WidgetsFlutterBinding.new.handlePointerEvent (http://127.0.0.1:8080/packages/flutter/src/gestures/binding.dart.lib.js:233:43)
at binding$5.WidgetsFlutterBinding.new.[_flushPointerEventQueue] (http://127.0.0.1:8080/packages/flutter/src/gestures/binding.dart.lib.js:222:14)
at binding$5.WidgetsFlutterBinding.new.[_handlePointerDataPacket] (http://127.0.0.1:8080/packages/flutter/src/gestures/binding.dart.lib.js:212:65)
at Object._invoke1 (http://127.0.0.1:8080/dart_sdk.js:176547:7)
at _engine.EngineWindow.new.invokeOnPointerDataPacket (http://127.0.0.1:8080/dart_sdk.js:172276:15)
at _engine.PointerBinding.__.[_onPointerData] (http://127.0.0.1:8080/dart_sdk.js:159053:24)
at http://127.0.0.1:8080/dart_sdk.js:159442:26
at http://127.0.0.1:8080/dart_sdk.js:159401:16
at http://127.0.0.1:8080/dart_sdk.js:159154:11

This is to do with the Overlay.of(context) returns null which I think its due to the context from MaterialApp builder
I am not sure how to fix this...
Could someone please help?

The DropdownSearch "OnChanged" inside I implement an API call method but when I scroll the view, DropdownSearch widget is refreshing and sets label value and remove the selected item.

../../../../../dev/flutter/.pub-cache/hosted/pub.dartlang.org/dropdown_search-0.4.5/lib/dropdown_search.dart:115:9: Error: Type 'AutovalidateMode' not found.
final AutovalidateMode autoValidateMode;
^^^^^^^^^^^^^^^^
../../../../../dev/flutter/.pub-cache/hosted/pub.dartlang.org/dropdown_search-0.4.5/lib/dropdown_search.dart:115:9: Error: 'AutovalidateMode' isn't a type.
final AutovalidateMode autoValidateMode;
^^^^^^^^^^^^^^^^
../../../../../dev/flutter/.pub-cache/hosted/pub.dartlang.org/dropdown_search-0.4.5/lib/dropdown_search.dart:148:29: Error: Getter not found: 'AutovalidateMode'.
this.autoValidateMode = AutovalidateMode.disabled,
^^^^^^^^^^^^^^^^

../../../../../dev/flutter/.pub-cache/hosted/pub.dartlang.org/dropdown_search-0.4.5/lib/dropdown_search.dart:253:7: Error: No named parameter with the name 'autovalidateMode'.
autovalidateMode: widget.autoValidateMode,
^^^^^^^^^^^^^^^^

../../../../../dev/flutter/packages/flutter/lib/src/widgets/form.dart:282:9: Context: Found this candidate, but the arguments don't match.
const FormField({
^^^^^^^^^

This is my code (I am using the example code):

DropdownSearch(
mode: Mode.MENU,
showSelectedItem: true,
items: ['Brazil', 'Italia (Disabled)', 'Tunisia', 'Canada'],
label: 'Menu mode',
hint: 'country in menu mode',
popupItemDisabled: (String s) => s.startsWith('I'),
onChanged: print,
selectedItem: 'Brazil',
),

Problems using the "Dialog" mode
The white space for the first item with top , the last item with the bottom is quite large
Using maxHeight does solve the smaller dialog display but doesn't solve the white space top and bottom

https://i.ibb.co/sFRPqJD/Screen-Shot-2020-07-15-at-12-53-55-PM.png

1. Default value for popupBackgroundColor should be Theme.of(context).dialogBackgroundColor
2. Clear and Dropdown buttons icon color should not be Colors.black54, something like:

color: Theme.of(context).brightness == Brightness.dark ? Colors.white54 : Colors.black54

I would like for the DropdownSearch to look as similar as possible to a TextFormField.

Currently, the spacing between the InputDecoration labelText and the dropdownBuilder is dominated by the IconButton containing the dropDownButton. An option to hide or show the IconButton dropDownButton would be appreciated.

Expectation

Value is still stored even though the keyboard showup

Reality

Value reset if keyboard showup

Reproduce Code

class DropdownSemester extends StatelessWidget {
  const DropdownSemester({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return DropdownSearch<SemesterModel>(
      mode: Mode.BOTTOM_SHEET,
      validator: (value) => value == null ? 'Semester dibutuhkan' : null,
      // onSaved: (newValue) => print(newValue),
      onChanged: (value) => context.read(dropdownSemester).state = value,
      showSearchBox: true,
      items: listSemester,
      dropdownBuilder: (context, selectedItem, itemAsString) {
        if (selectedItem == null) {
          return Text('Pilih Semester');
        }
        return ListTile(
          title: Text(
            selectedItem.nameSemester,
            style: appTheme.caption(context).copyWith(fontWeight: FontWeight.bold),
          ),
        );
      },
      popupItemBuilder: (context, item, isSelected) => ListTile(
        title: Text(
          item.nameSemester,
          style: appTheme.caption(context).copyWith(fontWeight: FontWeight.bold),
        ),
      ),
    );
  }
}

final List<SemesterModel> listSemester = [
  SemesterModel(idSemester: 1, nameSemester: 'Semester I'),
  SemesterModel(idSemester: 2, nameSemester: 'Semester II'),
  SemesterModel(idSemester: 3, nameSemester: 'Semester II'),
  SemesterModel(idSemester: 4, nameSemester: 'Semester VI'),
  SemesterModel(idSemester: 5, nameSemester: 'Semester V'),
  SemesterModel(idSemester: 6, nameSemester: 'Semester VI'),
  SemesterModel(idSemester: 7, nameSemester: 'Semester VII'),
  SemesterModel(idSemester: 8, nameSemester: 'Semester VIII'),
];

Hi...
I tried to use the dropdownSearchDecoration for the style, but when I added the dropdownsearch it didn't work at all

Hi. Thanks for awesome component.
It would be great to enable to pass barrier color for showModalBottomSheet and other types of dialogs

Is there a way to enable multiple select ?

It would be great to add dropDownSearchDecoration to override the button which calls search popup.

How to reproduce :
Using the basic example / Simple implementation from the docs. Or any of the docs implementations.

Using the drop-down and selecting any element will work, and the new selected item will be displayed correctly, while the search field was not tap-ed and nothing was searched.

However if you happen to search something and tap it, value will not pass and the selected Item will reset to default.

A Simple workaround for me was to update the selectedItem onChange.
onChanged: (data) { setState( () { newSelectedValue = data; }, ); },

However it doesn't feel as intended.

onFind方法里的参数filter来自哪里?不同传入输入的数据吗?

I'm not able to change label color or label text style,
label: "State",

Installing package version dropdown_search: ^0.4.6 and getting this 'AutovalidateMode' error, I am using this same package with version dropdown_search: ^0.4.4 and there it is working. Not sure what's the issue.

../../../flutter/.pub-cache/hosted/pub.dartlang.org/dropdown_search-0.4.6/lib/dropdown_search.dart:116:9: Error: Type 'AutovalidateMode' not found.
  final AutovalidateMode autoValidateMode;
        ^^^^^^^^^^^^^^^^
../../../flutter/.pub-cache/hosted/pub.dartlang.org/dropdown_search-0.4.6/lib/dropdown_search.dart:116:9: Error: 'AutovalidateMode' isn't a type.
  final AutovalidateMode autoValidateMode;
        ^^^^^^^^^^^^^^^^
../../../flutter/.pub-cache/hosted/pub.dartlang.org/dropdown_search-0.4.6/lib/dropdown_search.dart:149:29: Error: Getter not found: 'AutovalidateMode'.
    this.autoValidateMode = AutovalidateMode.disabled,
                            ^^^^^^^^^^^^^^^^
../../../flutter/.pub-cache/hosted/pub.dartlang.org/dropdown_search-0.4.6/lib/dropdown_search.dart:248:7: Error: No named parameter with the name 'autovalidateMode'.
      autovalidateMode: widget.autoValidateMode,
      ^^^^^^^^^^^^^^^^
../../../flutter/packages/flutter/lib/src/widgets/form.dart:282:9: Context: Found this candidate, but the arguments don't match.
  const FormField({
        ^^^^^^^^^

shrey@shrey-jain:~/Desktop/kashware/kashware$ flutter doctor -v
[✓] Flutter (Channel stable, 1.20.2, on Linux, locale en_IN)
    • Flutter version 1.20.2 at /home/shrey/flutter
    • Framework revision bbfbf1770c (3 months ago), 2020-08-13 08:33:09 -0700
    • Engine revision 9d5b21729f
    • Dart version 2.9.1

 
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
    • Android SDK at /home/shrey/Android/Sdk
    • Platform android-30, build-tools 30.0.2
    • Java binary at: /usr/bin/java
    • Java version OpenJDK Runtime Environment (build
      11.0.9+11-Ubuntu-0ubuntu1.18.04.1)
    • All Android licenses accepted.

[!] Android Studio (not installed)
    • Android Studio not found; download from
      https://developer.android.com/studio/index.html
      (or visit https://flutter.dev/docs/get-started/install/linux#android-setup
      for detailed instructions).

[✓] Connected device (1 available)
    • sdk gphone x86 arm (mobile) • emulator-5554 • android-x86 • Android 11
      (API 30) (emulator)

! Doctor found issues in 1 category.

Hi.. Thank you for this amazing plugin, you developed this plugin as I need for my app, thank you a lot..

I have one question.
Is it possible to avoid full screen when the keyboard is visible?

Keyboard is visible:

When the keyboard is visible I want to be like this:

I tried to detect when the keyboard is visible, if is visible I reduce the height, but the height didn't change (I used StatefulWidget).

Currently if dropdownBuilder is assigned, it's not possible to make label text shown as placeholder.
To fix this problem minor change is needed:

return InputDecorator(
                  isEmpty: value == null && widget.dropdownBuilder == null,

Check && widget.dropdownBuilder == null should be deleted, otherwise no way to get label shown as placeholder.

Currently it is hardcoded in _openMenu() as defaultHeight: 224
Please add property to be able to customize it.

I want when I go to the page the dropdown will automatically pop up instead of being actively touched by the user.

Hi, im trying to filter itens from an api, but when i search, always return null.

Im using a :

DropdownSearch<Estados>(
                mode: Mode.DIALOG,
                popupItemBuilder: _customPopupItemBuilderExample,
                maxHeight: 300,
                label: "Escolha Estado",
                onFind: (String filter) => getData(filter),
                onChanged: print,
                showSearchBox: true,
                searchBoxDecoration: InputDecoration(
                  border: OutlineInputBorder(),
                  contentPadding: EdgeInsets.fromLTRB(12, 12, 8, 0),
                  labelText: "Busque Estado",
                ),
                popupTitle: Container(
                  height: 50,
                  decoration: BoxDecoration(
                    color: Theme.of(context).primaryColorDark,
                    borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(20),
                      topRight: Radius.circular(20),
                    ),
                  ),
                  child: Center(
                    child: Text(
                      'Estados',
                      style: TextStyle(
                        fontSize: 24,
                        fontWeight: FontWeight.bold,
                        color: Colors.white,
                      ),
                    ),
                  ),
                ),
                popupShape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(24),
                    topRight: Radius.circular(24),
                  ),
                ),
              ),
              Divider(),

An when i click on the Dropdown, the items from API are loaded. Im using:

Future<List<Estados>> getData(filter) async {
    final headers = {
      'contentType': 'application/json',
      'X-Parse-Application-Id': '',
      'X-Parse-REST-API-Key': ''
    };

    var response = await Dio().get(
      "https://hxxxx/classes/Estadoscidadesbrasil_StateProvince/",
      options: Options(headers: headers),
    );

    var models = Estados.fromJsonList(response.data['results']);
    return models;
  }

My api dont have any way to filter on the URL.

How can i filter?

Hi, how to make the input to dense?
InputDecoration already set isDense to true but still no change.
Thanks

the emptyBuilder function should have the current search entry as a parameter alongside the build context.

...
emptyBuilder: (context, searchEntry) {
  return ListTile(
    title: Text('No result for $searchEntry'),
  );
},
...

This also might be useful if we want to implement a logic based on the search result, for instance:
Create a new dropdown entry from the user input on the searchBox

...
emptyBuilder: (context, searchEntry) {
  return ListTile(
    title: Text('Add new entry for $searchEntry'),
    onTap: () => addNewEntry(searchEntry),
  );
},

void addNewEntry(String entry) {
  // logic for adding a new entry here
}
...

Is it possible to disable or enable searchable_dropdown after button click?
For just Example:-
new TextFormField(
readOnly: True,
);
if we set readOnly true so the user can't edit this.
So can we do the same thing in our searchable_dropdown to restrict to open Builder or open dialog?
Because I want to use the single searchable_dropdown in both displays and edit functionality.

Thanks.

as the title

I have a dark and light theme in my app. text is unreadable when using dark theme.

can't find it in the package. Is there any way to change this dynamically?

I would like to add the searching text as an option to select in the menu.

I have been trying to find a way to get the text I am writing so I could change the menu list but I haven't been able to find out how.

According to semantic versioning any package with a 0.x.x as version number does not have a stable API.

Still it was very annoying for me to have a different package break, because a breaking change was introduced between 0.4.4 and 0.4.5:
flutter-form-builder-ecosystem/flutter_form_builder#507

The maintainer set the package version to: dropdown_search: ^0.4.4 which should fetch all new packages 0.x.x for minor and fix changes, but not breaking.

Could you please use a major version bump if you introduce breaking changes? 1.0.0 and 2.0.0 and so on

here the official semantic versioning spec.
https://semver.org/

I was trying to use the Widget in a row and also in a dynamic widget, the problem is that as change the focus to other input widgets the value resets. In case you use selecteditem attribute then it resets to the initial value.

Row( children: [ Flexible( flex: 1, child: Padding( padding: EdgeInsets.only(left: 5), child: TextFormField( controller: _descriptionController, onChanged: (v) => _UpdateFormState.descriotiondata[widget.index] = v, validator: (v) { if (v .trim() .isEmpty) return 'Please enter Study Description'; return null; }, style: TextStyle(color: Colors.blue), decoration: InputDecoration( counterText: '', filled: true, fillColor: Color(0xFFF5F5F5), labelText: "Description", labelStyle: TextStyle(color: Color(0xFF45B4FF)), focusedBorder: OutlineInputBorder( borderSide: BorderSide(color: Colors.blueAccent, width: 1.0), ), enabledBorder: OutlineInputBorder( borderSide: BorderSide(color: Colors.blueGrey, width: 1.0), ), ), ), ), /* TextFormField( controller: _descriptionController, onChanged: (v) { _UpdateFormState.descriotiondata[widget.index] = v; }, decoration: InputDecoration( hintText: 'Study Description' ), validator: (v){ if(v.trim().isEmpty) return 'Please enter Study Description'; return null; }, ),*/ ), SizedBox(width: 10), Flexible( flex: 2, child: DropdownSearch<StudyName>( mode: Mode.BOTTOM_SHEET, isFilteredOnline: true, showClearButton: true, showSearchBox: true, items: studyNamemodel, itemAsString: (StudyName u) => u.studyName, onChanged: (StudyName data) { print(data.studyName); _UpdateFormState.dropdowndata[widget.index] = data.studyName; //FocusScope.of(context).nextFocus(); }, maxHeight: 300, onFind: (String filter) => getData(filter), label: "Study Name", ), ), ], );

For further reference, I had already posted this on stackoverflow here is the link

when I generate a search with the following example it does not deliver results and the API does

     DropdownSearch<UserModel>(
            mode: Mode.BOTTOM_SHEET,
            isFilteredOnline: true,
            showClearButton: true,
            showSearchBox: true,
            label: 'User *',
            dropdownSearchDecoration: InputDecoration(
                filled: true,
                fillColor:
                    Theme.of(context).inputDecorationTheme.fillColor),
            autoValidate: true,
            validator: (UserModel u) =>
                u == null ? "user field is required " : null,
            onFind: (String filter) => getData(filter),
            onChanged: (UserModel data) {
              print(data);
            },
            dropdownBuilder: _customDropDownExample,
            popupItemBuilder: _customPopupItemBuilderExample,
          ),

closed dialog means the dropdown search widget is showing and waiting for actions.

how can I change the layout of it?

nothing in the example file fixed my problem.

seems like when I click the dropdownsearch, the focus color automatically switch to primary color without configuring it. how about when it's unfocused and haven't selected anything yet? border color, radius, label and hint colors?

DropdownSearch(
label: "Name",
onFind: (String filter) => getData(filter),
onChanged: (UserModel data) => print(data),
),

How can I implement the already selected item for above code?

Currently menu width is the same as widget width. Sometimes widget is small but open menu should be wider. There is already dialogMaxWidth, so adding popupMaxWidth would be nice.

In 0.4.5 it is working fine, updating dependency to 0.4.6 - stops working, returning back to 0.4.5 - working again.

I am trying to open dropdown bottomsheet search , when onclick/ontap in button. I dont know exactly how to integrate it

Throwing an exception Unhandled Exception: Bad state: Cannot add event after closing, when closing dropdown before future completes,