Asynchronously loading drop down menu - Flutter

Question

I am trying to build a form with a phone input that includes country codes. Essentially, I am trying to make something a lot like this:

I already found and cleaned a list of flags, countries, and their codes, and built the method that creates a DropdownMenuItem for an arbitrary index. I then construct a list of them and pass it to the DropdownButton widget. It's all very simple, so I don't think the code is necessary. However, because I have so many countries, and therefore menu items, the menu lags significantly when opening. So, I was wondering if drop down menus are capable of loading large numbers of widgets in a smarter fashion than it seems they do.

Can a drop down menu could load the first 10 or so widgets around the selected index and display them, as that is all that will be in view initially, and then load the rest of the widgets asynchronously? I suspect that this will require a custom drop down menu, but I am not very well versed in the implementation of Flutter's drop down menu, so I am unsure of how to proceed with this.

Any help is appreciated.

Solution

I don't think that "loading" is the actual problem here, more likely it's the rendering/building of the widgets. You can improve the situation by using something like a ListView.builder that builds items on demand.

It seems like the default dropdown system is not based on a ListView.

You can create your own version of the dropdown (like a complete customized copy of the classes), which will require quite quite a lot of work and research.

Or alternatively, use something like a SimpleDialog with an embedded ListView to display the list. Like this one for Android.

Comments

[BIS Tech]

how to add image and value on dropdownmenuitem?

[acn3]

The link to the alternative seems to be exactly what I want. I was wanting to implement a search as well, and I think a dialog is the way to go. Thank you.