Custom DropDown | Flutter UI

[@borogove]

Great Tutorial! I needed a custom functionality the default Material Dropdown didn't provide. The first 15 minutes of your video alone helped me to build my own custom Widget. Thanks a lot!

[@g_rice]

I was in the same situation today, this video helped me figure it out way faster than I could have done it on my own by just reading the docs!

[@techieblossom]

Nice to hear.

[@codontv1000]

Thanks for this video 🎉

[@dc5]

This was pretty awesome. Thanks for sharing!

[@mesharibuhadi1437]

Man thank you very much!! great video and hope the best for u

[@chirantanthakkar51]

Great Work @Techie Blossom. Thank you so much for this wonderful tutorial.

[@xaxababa6616]

Dude this is awesome! Thanks my dude! If you could do complex login/signup pages that would be awesome too!

[@agueroalvaro]

Thank you for the amazing dropdown!

[@decodedfaith7556]

Nice one mahn! Thanks a lot

[@danishdarren1179]

Well I'm new to your channel .. The work around here is very professional and productive.. Keep it up. Love from Uttar Pradesh

[@techieblossom]

Thank you

[@TheGaoNan]

Techie blossom, i just discovered your channel, amazing work my friend! Keep it up

[@md.imamhossain1890]

Osthir, keep it up!!

[@اسروكورة]

thank you

[@salmankhuwaja4539]

This tutorial is very helpful :)

[@dchandrani]

It was great that you demonstrated use of factory method, but what I did was removed border radius from the child of Material widget and instead take ClipRRect as child of Material and gave border radius to it. That also worked. No need to write factory logic.

[@techieblossom]

That's a good idea. Thanks.

[@tarun7822]

Loved your video. However, can you publish it as a working widget as of now most of the values are hardcoded and the select function is also not working or so, If you feel it's alright, I can make the changes and publish it as a handy plugin on pub dev.

[@shahanahmed952]

@Tarun, have you done the changes or added it like a plugin?

[@rbsdl]

You rock !!

[@mohammedashabuddin5692]

That was really helpful. Thanks

[@coolprashantmailbox]

Thank you so much for this video

[@swetakumari282]

This video is very helpful for me, so thank u sir, and i am requesting to you sir please make a video on how to implement checkbox group in flutter

[@kev001able]

Great video 👍🏼. Kindly do a provider with rest api application. Thank you

[@Станислав-щ7ф8е]

Thanks for video, its was helpful for me.

[@techieblossom]

Glad to hear that

[@mohamedkhattab7002]

​@@techieblossom hello friend your video is awesome but can you make video about making nested popup menu(like navbar in website) i think this idea would be great

[@mariechristin7999]

First of all, thank you very much, it helped a lot. I used your video to make a dropdown, with dynamic count of items. My Problem is to get the selected value back, do you have a solution for me?

[@shahanahmed952]

@Maria Christin, what did you do to solve this problem?

[@ProductionReadyApp]

good tutorial, but what if dropdown button is present at the bottom of the screen?

[@VJKoding]

Amazing sir thanks you😍

[@instcicada]

Why not using using animated container or Animation builder ?

[@Станислав-щ7ф8е]

What is right solution for close DropDown before go to next or prev. screen? Shoud I use RouteAware + RouteObserver?

[@techieblossom]

You can, I still have to learn what is that.

[@borderlandland830]

Hey bro, I love your video, that's awesome!!! But have some question, how can i add some animation in OverlayEntery, I tried it on my project bu it didn't work, can u give some suggest to me???

[@amarpreetsingh857]

If I have two text field and one dropdown box.Whenever I select the dropdown box, the text field resets. setState() any solution?

[@chirantanthakkar954]

Hi Techie Blossom, Thank you for the Tutorial. I have an issue. 1) I am using this on screen_2. 2) I am Opening the DropDown and keeping it open. 3) I am pressing "back" button and moving to Screen_1. 4) The DropDown is still open. Tried overriding "dispose()" like this: @override void dispose() { floatingDropdown.remove(); super.dispose(); } This way, I get rid off the DropDown in Screen_1 but it's delayed by a second approx. I mean, the dropdown should be disposed off before moving to screen_1 but with this solution, the dropdown is still there for a second after the Screen_2 is gone. How to solve this issue?

[@techieblossom]

Why dispose and remove, instead close the dropdown by changing flag of whether it's open or closed.

[@tejaswininimbalkar7390]

Hey, did you solve it?

[@cartoon-with-kokoro]

how to get value on dropdown? i am not see that, can you help me? pls.

[@Charmin484]

Great work man, I have a question, how do i remove the overlay dropdown when i tap elsewhere other than the same place, say a blank space, i want the dropdown to be removed, how do i do that

[@kleberksms]

It's necessary to remove itself: stackoverflow.com/questions/53751245/how-to-close-self-overlayentry-ontap, but I do not know what it's the right way.

[@aloosh3291]

Very nice, do you have complete courses on flutter ?

[@techieblossom]

I have created some series of videos, but not created videos like crash courses and learn in one day like those things. kzbin.info/aero/PL342JVRNQxEDE8_NA_BCA8sG9W9NtW0oF kzbin.info/aero/PL342JVRNQxEBo_AnWeaoH6VqiEpRaHyGI kzbin.info/aero/PL342JVRNQxEC0Iz5J5qlKcrLRni5cU1jo

[@Tonyluo2001]

Thanks for the video. I'm trying to build a dropdownmenu that changes its menu items according to another input. I managed to change the list that loads into the dropdownbutton widget, but don't know how to make it refreshes itself. Can you give me some advices?

[@techieblossom]

Use Bloc

[@shahanahmed952]

How did you solve this issue?

[@ojasviverma7055]

Sir can you please tell me any package to search from one station to another station path. if I have set of stations with me, I have to search path from one station to another, do I have to use graph or any package is there do that

[@techieblossom]

Google maps API.

[@ojasviverma7055]

@@techieblossom sir station are not on maps, consider metro app which has stations for which source to route need to find out, in that application

[@techieblossom]

You have set of stations. Google map API can give you path details by giving name of station or latitude longitudes..

[@ojasviverma7055]

@@techieblossom Thankyou sir for replying but by stations I means static data which not exist on map exactly, consider a stations like A, B, C, D, E, F all connected now search path from A to E where A to B is one graph and D to F one and D is common vertex in this case how to implement source to destination search

[@techieblossom]

Sorry no idea.

[@alexyan7245]

sir, how to implement dropdown with bLoc?

[@softwareeducation4330]

I downloaded your project from github. I haven't changed any of it. But it gives an error in "widget.text.uppercase ()" part. I can only write normal text and it does not detect the item you selected. How can I solve this?

[@techieblossom]

I will try to follow your steps, and see if it fails. Then I can give solution

[@mohamedakhelij]

please bro how can we dismiss the dropdown after clicking outside of it ??!

[@mohamedkaraa3288]

i'm stuck there too, did you find a solution for that ?

[@mohamedakhelij]

@@mohamedkaraa3288 not yet unfortunatly

[@mohamedkaraa3288]

@@mohamedakhelij i'll get back to you if i found out smthng

[@mohamedkaraa3288]

hello again, this thread on stackoverflow helped me solve the problem : stackoverflow.com/questions/59301800/how-to-hide-an-overlay-with-tap-somewhere-on-the-screen-with-flutter

[@sushilghorasaini7883]

had to use '-' sign infront of xposition and yPosition to work, OverlayEntry _createDropDownMenu() { return OverlayEntry(builder: (context) { return Positioned( left: -(xPosition), width: width, top: -(yPosition) + height, height: 4 * height + 40, child: Container( color: Colors.red, height: 200, )); }); } any problem with that if used in other cases?

[@techieblossom]

Why - used? Show the output if you do so.

[@sushilghorasaini7883]

@@techieblossom output from Debug Console without negative sign: I/flutter (28230): height: 60.0 I/flutter (28230): width: 319.5293998850261 I/flutter (28230): xPosition: -52.0 I/flutter (28230): yPosition: -68.0 If i remove negative sign, floating drop down menu moves towards top left corner of the screen.

[@alexw650]

I couldn't use it because I couldn't find a way to dismiss the dropdown menu when tapping on one of the DropdownItems :(

[@techieblossom]

I think, I have explained what closes the menu Did you not use floatingDropdown.remove() when an item is tapped?

[@godspoweronojaife9091]

please i want the written tutorial of this lecture with the code.

[@allenrichardyeager8449]

How to tap on item and overlay gone

[@BrYarDJ]

hello my brother you can tell me how can add multi text file to my project ? i added data.txt to folder in assests/ after that i need syntax to call text to my button please help. thanks.

[@techieblossom]

Your query is half understood. Do you want multiple files in assets folder? Or do you want to access file in asset?

[@BrYarDJ]

@@techieblossom im actually have multi txt file in folder assests/exampl/data.txt and i assort in pubspec.yaml. and i have multi buttons, for that when presses the button one data.txt view and for ether buttons do it , how can do it? i don't write syntax. thanks if you have idea.

[@jonibaba9362]

This drop-down fits on as app bar ?

[@techieblossom]

Why not, you can use it as app bar. Use colum in scaffold whose first element will be this widget.

[@jonibaba9362]

@@techieblossom thanks I'll try

[@kailashks901]

How do I use this and choose any option and save it to a variable?

[@techieblossom]

Bloc.. add event when any option is selected.

[@kailashks901]

@@techieblossom Thanks!!!

[@techieblossom]

Did you by chance add bloc??

[@kailashks901]

@@techieblossom not till now. i am still learning the basics. Will be reaching the bloc part later.

[@asifuddinahmedsheikh2367]

1- This code does not return the selected value. 2- When we tap on a menu item it does not hide the menu. Reply. Thanks

[@techieblossom]

Facing problem in doing that?

[@asifuddinahmedsheikh2367]

So , I cannot use it like selecting values / items from dropdown !!! (Do you still working on it or its a dead end) !

[@techieblossom]

If you are unable to do let me know, I can update that in GitHub. I created video to let people know how you can create custom dropdown. Didn't considering adding selection events.

[@brunomulas389]

Five classes for a dropdown? Really?

[@techieblossom]

Judging code by number of classes? Modular codes are like that.