When dropdown is clicked, UI should not get expanded, the items should display like normal dropdown effect

[wasimakram3]

No description provided.

[wasimakram3]

For Example: If I'm having 6 dropdowns horizontally, i need to show items down the dropdown like default dropdowns. total UI should not get expanded

[lcuis]

Did you try dialogBox: false parameter as in below example?

SearchChoices.single(
        items: items,
        value: selectedValueSingleMenu,
        hint: "Select one",
        searchHint: null,
        onChanged: (value) {
          setState(() {
            selectedValueSingleMenu = value;
          });
        },
        dialogBox: false,
        isExpanded: true,
        menuConstraints: BoxConstraints.tight(Size.fromHeight(350)),
      )

[lcuis]

Closing for inactivity. Feel free to reopen if needed.

[nhatzbulawan]

@lcuis , I think he is looking for something like the image below which is what I am looking for as well instead of expanding.

[lcuis]

Thanks a lot @nhatzbulawan for the explanation!

The list of selectable items must be floating in an overlay below the search bar and it must be scrollable. Probably, the list of selected items would be underneath the search bar, hidden by the overlayed selectable list.

A good lead for solution might be the use of the DropdownButton class.

If time allows, I'll try to see if something can be done about it because this would a compact display of the same features. Though, it doesn't seem easy to achieve.

[nhatzbulawan]

@lcuis , Yes exactly. And one more thing, if it is possible to have an option to change the dialog to be full, max-width based or content width based
.

[lcuis]

@nhatzbulawan ,

You are still talking about the new dropdown mode I assume.

Full means full screen? This may be a bit complex with the keyboard and the search bar that need to be visible.

Max-width is wathever room is available between the search bar and the keyboard?

Content-width means that each item must be displayed with wathever width is required. This probably implies a scroll to move to the side to make the whole content visible.

I'm not sure time will allow me to do all of this. I'll see what I can do.

Thanks anyway for the details.

[nhatzbulawan]

@lcuis , I'm sorry I forgot to mention that those options are for dialog. Currently, I think, it only supports full screen. It would be best if it can adjust the width. Like for example if the options are just numbers. Using the full screen on the web is not so good as a user experience.

Anyway, thank you so much for your responses.

[lcuis]

@nhatzbulawan in that case, maybe this issue would be what you are looking for:
#38

[nhatzbulawan]

@lcuis , Yes, Thanks

[lcuis]

Hello @nhatzbulawan ,

I tried for a long time to find a solution that would fulfil your requirement. I am sorry to say that this is not as easy as I initially expected.

I tried with DropdownButton, showMenu, PopupMenuButton and many other approaches. None seem acceptable. At least within this project.

The best I reached was the following:

I faced this issue where the overlay doesn't apply the parent theme:
flutter/flutter#39379
I believe this can be worked around.

More severely, if I scroll the page with the parent button, the overlay doesn't follow. This seems to be described in this issue:
flutter/flutter#50961

Also, the items don't scroll by themselves.

I wish my answer would be more positive. Sorry about that. Maybe this can evolve with the potential resolution of the issues mentioned or maybe this can be solved with another plugin?

I have put my attempts in the dropdown branch:
https://github.com/lcuis/search_choices/tree/dropdown

Maybe this plugin is a good starting point?
https://pub.dev/documentation/overlay_container/latest/overlay_container/OverlayContainer-class.html

[nhatzbulawan]

Hello @lcuis,

Thank you so much for the effort and update. I really appreciate it a lot.

I used dropdowninputfield for options that have less than 10 items and use the modal for more than 10 items with your plugin.

[lcuis]

You’re welcome @nhatzbulawan .
I am glad you found a solution.
Thanks for your response and thanks again for the clarification of the suggestion.