Adding Nigeria State and City Dropdown to your Flutter App

Benson Arafat
2 min readSep 19, 2022

--

You have gotten to that point in your app where you want to take user State and City. Yes, I know creating a drop-down takes much time.

So I thought of making a flutter package which makes this task easy and makes development easy. Using nigeria_states_dropdown you can do all this with one click.

How to start?

Run this command:

With Flutter:

$ flutter pub add nigeria_states_dropdown

This will add a line like this to your package’s pubspec.yaml (and run an implicit flutter pub get):

dependencies:
nigeria_states_dropdown: ^0.0.1

Alternatively, your editor might support flutter pub get.

Import it

import 'package:nigeria_states_dropdown/nigeria_states_dropdown.dart';

Great, now you have added the package. I know your next question, how can you use it? Well, it’s simple.

NigeriaStatesDropDown(
onStateChange: (String state) {
print("State $state");
setState(() {});
},
onTownChange: (String town) {
setState(() {
print("Town $town");
});
},
),

All you have to do is add this widget anywhere you want to use it and that is all.

To call feedback or get data from this widget, you can make a function unchanged

Example

void main() => runApp(const MyApp());class MyApp extends StatefulWidget {
const MyApp({Key? key}) : super(key: key);
@override
State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Material App',
home: Scaffold(
appBar: AppBar(
title: const Text('Nigeria State Drop Down'),
),
body: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
children: [
NigeriaStatesDropDown(
onStateChange: (String state) {
print("State $state");
setState(() {});
},
onTownChange: (String town) {
setState(() {
print("Town $town");
});
},
),
],
),
),
),
);
}
}

Conclusion

You can also check github example, drop your issues and contribute

Thanks

Happy Coding

--

--