Flutter: Multi Level Dependent Dropdown (Address)
Get Started
On this occasion I will provide a tutorial on how to use interconnected dropdowns for your project. The thing that is most often encountered is making the dropdown depend on taking addresses starting from the province to the sub-district. I will make 3 dropdowns, namely province, district, and sub-district. I retrieve API data from:
https://farizdotid.com/blog/dokument-api-daerah-indonesia/
which contains complete and up-to-date regional data on Indonesia. Thanks farizdotid. Okay, just get on with it.
Step 1: Folder Structure and Packages
In this case we are using an additional package to retrieve the data from the API we specified earlier, so we add a little extra to pubspec.yaml. I’ll also show you the folder structure we’ll use in this case. Below is the folder structure and pubspec.yaml:
Step 2: Complete Code
Here we only create a simple multi-level dependent dropdown, so we only need an additional file to accommodate the screen of the dropdown that we created. First is the main file, namely main.dart. Not much has been changed in this file. The home property is redirected to the screen for our dropdown. Here is the code for main.dart:
The second is the mainmenu.dart screen for our dropdown. This screen displays only the usual dropdown buttons and also the output of each option from the dropdown. I’ll explain a little bit how this code works.
There are 6 functions used, namely the first function to retrieve all provincial data from APi that we have used. Then after that we take the id of the province we choose to use in the second function, which is to retrieve district data based on the province id we chose and so on until we get the sub-district.
Here is the complete code for mainmenu.dart:
Final Result
Conclusion
Done. Now we have created a multi level dependent dropdown of 3 buttons. I hope this article was of help. To get the entire code, you can open my github via the link below:
Thanks
