Easy way to make Country State City Picker in flutter

Altaf Razzaque
2 min readMar 1, 2021

Designing an application may be a real struggle when you have to made it to smartphones, tablets and web. many time you need to add dropdown which gives you countries states based on country and cities based on the state. to make this functionality you need some time to design logic and code for this functionality. here is the nice plugin by which you can achieve above functionality in couple of minutes without any headache.
Let’s get started!

Photo by Austin Distel on Unsplash

Step 1: Add csc_picker package in your pubspec.yaml, you can download package from https://pub.dev/packages/csc_picker

csc_picker 0.2.1

Step 2: Go to your code and add CSCPicker Widget

CSCPicker(
onCountryChanged: (value) {
setState(() {
countryValue = value;
});
},
onStateChanged:(value) {
setState(() {
stateValue = value;
});
},
onCityChanged:(value) {
setState(() {
cityValue = value;
});
},
),

Also you can enable disable Country Flag by using showFlag parameter, change layout horizontal vertical by using layout parameter

Example:

Output:

Horizontal Country State City Picker

Woo Hoo, You nailed it !

Photo by Ambreen Hasan on Unsplash

Conclusion:

Country State City Data base is huge and it take time to design functionality from scratch, it will consume you valuable development time. in such situation if we use CSC Picker flutter package, then we can save lot of time and utilize that time in development.

As always, you will be able to find the code developed for that article here:

--

--

Altaf Razzaque

Software Engineer with around 5+ years experience in software development. Experienced in developing Android, iPhone and iPad apps, And desktop apps.