DropdownMenu (Widget of the Week)
HTML-код
- Опубликовано: 15 янв 2024
- Use the DropdownMenu widget when you have a menu with items, and need them to be searchable and filterable.
DropdownMenu API docs → goo.gle/4aTfiz8
Watch more Widget of the Week → goo.gle/FlutterWidget
Subscribe to Flutter → goo.gle/FlutterYT
#Flutter #WidgetOfTheWeek
Speaker: Eric Windmill
Products Mentioned: Flutter 
Наука
Awesome tutorial on the DropdownMenu!
Really helpful and clear explanation. Your content consistently delivers value.
Thanks a bunch for sharing your expertise! 🙌
Looking forward to more informative content like this. Keep up the fantastic work!
Dropdown menu items are little bit hard to customisable
Hi! I'm working with the Flutter team to make Material widgets more customizable. Can you help give me a better understanding of how you're trying to stylize it? I'll pass it on to the team. Thanks!
@@KhanhFlutterAdjusting the width of drop down menu entries widget
@@KhanhFlutter I'm not able to customize the empty drop menu when search doesn't match any item... can we just hide the menu if there's no items?
@@modarct You can use an if statement for that.
@@samueladekunle Ofcourse! the question is where!!
Perfect. Thank you Flutter ❤
Great video :) Still excited for the day when Widget of the week is weekly again
This is beautiful, the dropdown button whatever that was used before wasn't straightforward to implement, this is Flutter at its best.
Thanks. We created a custom widget for that.
That also supports dropdown, dropup, dialogue, and full screen
It's been a month since the last Widget of the week, welcome back!
Any updates on the video series "Managing State in Flutter" by KhanFlutter?
Good widget. Long awaited, but in real app use cases we need a multi select dropdown menu almost always..
Is that possible to implement with this widget?
or a separate one perhaps?
So far we've always implemented a custom multi select dropdown button
I love Flutter ♥
Beautiful
There are many bugs in this widget.
1) Each of the menu items have hidden focus nodes, so we need to press tab multiple times just to get the focus on the textfield of dropdownmenu.
2)Transfering the focus to the trailing icon through tab key->Press enter to open the dropdownmenus->cycle through the choices using arrow keys->select one item using enter->It doesn't call the onSelected method of dropdownmenu in this case, which leads to value not saved.
It would be awesome if there was a multi-select option. The selections could be chips with an x icon to easily de-select. Food for thought 😊
Awesome..😍
amazing 😍😍😍😍😍
Hello, is this widget available as of this release? Is there a webpage which shows a timeline of features added to Flutter? Thanks
Can you style the menu items? Like if I wanted to include a small thumbnail next to each selection item, or could I display a list of favourites at the top of the menu, or can I select multiple options with it and have a tick next to each one? or do anything remotely close to any of this without having to build a custom widget like I have every other time I have used dropdowns in flutter?
I guess you can't as it uses Drop-down Menu Entry obj as inputs
Hey there! You can generally customize DropdownMenuEntry in the sense that all leadingIcon, labelWidget and trailingIcon are Widget type, so we can put any widgets there - does that address the thumbnails feature? Can you further elaborate on "could I display a list of favourites at the top of the menu" -- is this different from the ability to order the menu items themselves?
@@KhanhFlutter Yeah so a feature that has been requested for my use case is the idea of having a searchable dropdown that displays either the most commonly used options at the top or a list of favourites at the top of the dropdown menu for quick selection without having to search for it
just WOW
i love flutter ❤❤
You can put label in DropDownMenu but what if I want to put a label in DropDownMenuEntry as well and might be multiple lines?
how can I give full screen width in this widget?
any idea how to set the color of the background when you havent clicked it mine is currently transparent so it has the same color as the background unless clicked.
Hi, may I ask what version of flutter sdk this DropdownMenu available?
Great
i found it is hard to use the dropdown, since its not allowing me to pass null value or 2 value which had the same value. I use object as items in the dropdown menu, and it alwasy said that i pass the exact same object. i knew it was the same object, but the attributes are completely different. any suggestion??
How do you guys make these type of video’s (software)
Super
I used leadingIcons and they don't appear in production or after building for web, android. I don't have mac so I'm not sure if it will be the same. Any info I could do? TIA.
You have to add input type like html. If the type is number, add the icon up and down like html
use keyboardType: TextInputType.xxxx
I have found a bug. So when using the dropdownmenu and I want to set the width to be fill up the width of the screen and let's say I use mediaquery and the size I gets expanded beyond the with of the screen. With all other widgets this works like a charm, let say you have a dropdownmenu in a container and the container have horizontal padding and then you add the dropdownmenu in there and set the with to fill up it as I said expand beyond they screen. also there is no padding for the selected item it is flush to the left side of the widget, so maybe its time for a pull request.
That's cool and all, but wish there was an example that didn't use a pre-existing class like Color as an example.
I'm not able to customize the empty drop menu when search doesn't match any item...
Guys, I appreciate the work you made, but please consider shortened versions, without intro and background music. If you are learning flutter in 2024 this playlist is harder to watch in a row then you think... You might ask, why am i watching all in a row, well, at my position I dont need a perfect understanding, but starting from scrach requires me to have a general overview and i need to be aware what widgets are there and what it is actually possible to not reinvent the wheel. I hope you will consider this, peace.
Good
why enable filter is not working with me ?
shouldnt the value be fed to it instead of having its own internal value?
Hello Flutter Team, I am incorporating a DropDownMenu within a Form Widget. I would like to validate the selection of a specific menu item, and if none is selected, I would like to use the errorText property and highlight it. What is the best approach for this ? Thank you.
state management lol, add a validator to your textFormField that contains the drop down menu and the validator will check if the value stored in the state for the drop down value is null, if it is, then you return 'Error message' else, you return null
@@marana.th4 what do you mean by 'textFormField that contains the drop down menu'? How do you pass the DropdownMenu to a TextFormField? DropdownMenu accepts a TextEditingController but that doesn't help with validation.
@@Uhuru_Kenyatta it has suffixIcon property, you can pass it a DropDownMenuButton as it's suffix icon, only thing is that the drop down menu button takes up a lot of horizontal space, so it will be taking up quite some space on the form field, it takes the horizontal space of the longest text inside it, i mean not visually, visually its just a button, but when someone types a long text, the text will disappear before it actually gets to the drop down button, you can solve that in a number of ways tho, one good way might be to just add an IconButton instead of a DropDownMenuButton, then manually trigger a dropdownmenu onTap of the IconButton
Did the solution offered herein below work for you?
@@Uhuru_Kenyatta I actually replied this the day you sent it, I don't know why youtube deleted my reply, but here it is again, You create the text form field, and it give it a "validator" that will run the validation, in this case, checking if the value of the variable where you hold the picked menu item is null, then you return a string in the validator, else return null. this will take care of the "highlighting of the field and showing errorText", then the TextFormField has a "suffixIcon" property, and you will then pass it a `DropdownButton`, but I said the only issue with this is that the dropdown button has a splash area as big as the longest text in it's menu, so that can affect the Pointer detection of your text field and even the view of it, so to combat that, you could just use an IconButton as the suffix icon that has the drop down icon, and onTap of it, you render a menu
Requested Multi-Select Dropdown: rejected from Flutter Material Team…it exists for Angular. Why not for Flutter?
I know we got Tools like Overlays, but why not having a direct Multi-Select Dropdown?
Why do I need a package for that?
how can i get the dropdown value ?
❤
Please support the feature to get dropdown options by api call so that whenever we open dropdown we get the options by api call. We can show a Loader until option load.
👌
How to make a video like this?
Wait, you can search dropdowns? 🤯
Comentario en español que tanto buscas
DropdownButton, DropdownButtonFormField... and now DropdownMenu?
Seriously, what's going on?
According to the video, DropdownMenu is a replacement the first two.
i believe, the old ones are going to be deprecated in the near future!
late as always
how can i get the dropdown value ?
With property onSelectedMenu, You capture the value