Sunday, January 17, 2021

Show searchable_dropdown Widget Without Using Dropdown But Button


Hello guys, My first post for this year and today I'm gonna show you how to use searchable_dropdown package when they only show the searchble_dropdown through dropdown, but actually if you look closer inside the package you can find DropdownDialog which is you can implement ShowDialog to show it without using Dropdown.

In this useful package, you don't need to implement your own search because it's provided by the package. You only need to provide the data to the widget. That's what I like about this plugin or package. It's very useful because I used this for my app Food Today where the use can search food categories using this plugin and there's textfield where you can type the category you want to show.

As you can see on the video above where I click search button then showing searchable dialog. It's not hard to do luckily. First of course you need to install the package searchble_dropdown in pubspec.yaml and don't forget to do "flutter pub get" in terminal before using the package in your code. 

After that you can create maybe button to trigger the dialog. Or anything you want maybe card widget or something inside list widget. So this is the part where you need to do. First create a method that return Widget. This function is used to initialize the data. Here I give you an simple example. It's generated number from one to ten. Don't worry I give you the code.

And then return DropdownDialog which is you need to fill the paramters items, selectedItems, multipleSelection, dialogBox, and closeButton. You can find the type of the parameter through debug code, right. So After you accomplish the function. You can now show it using showDialog. Just return the widget in builder. Done, you can try it and It's supposed to be working seamless without dropdown.

If you have any question related this topic, feel free to ask in comment. Hope I can asnwer all ya questions. Thanks for visiting my simple blog. You can also try the function in my app called Food Today available on App Store and Play Store.

The code :

No comments:

Post a Comment