Flutter – Get Countries, States, Cities List Dropdown

In this article, we will learn How to show all countries, states, and cities in the world and take their value accordingly. If you are making a large scalable app that will be used in almost all countries then you should use this application. We will show 3 dropdowns for country, state, and city and we can get their details accordingly from controllers. A sample video is given below to get an idea about what we are going to do in this article.

Step By Step Implementation

Step 1: Create a New Project in Android Studio

To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to Creating a Simple Application in Flutter.

Step 2: Add the package in pubspec.yaml

Add the country_state_city_pro package in pubpspec.yaml file like this

Dart

dependencies:
  country_state_city_pro: ^0.0.6

Step 3: Import the package in your file and add 3 controllers

Import the package in screen and we will create 3 textfield controllers

Import package

Dart

import 'package:country_state_city_pro/country_state_city_pro.dart';

Create 3 textfield

Dart

final TextEditingController countryCont = TextEditingController();
final TextEditingController stateCont = TextEditingController();
final TextEditingController cityCont = TextEditingController();

Step 4: Add the widget for country, state, city picker

Now we will add the widget in your screen

Dart

CountryStateCityPicker(
                country: countryCont,
                state: stateCont,
                city: cityCont,
                dialogColor: Colors.grey.shade200,
                textFieldDecoration: const InputDecoration(
                border: OutlineInputBorder(borderSide: BorderSide.none))),

From the controllers you can get all the details like country, state, city. You will also get snackbar if you tried to directly select state,city without selecting the country,state respectively

Let’s understand all the property of this widget

Property Name	Description	Data Type	Example
country	It will take a controller to get details about country selected by user	TextEditingController	countryCont
state	It will take a controller to get details about state selected by user	TextEditingController	stateCont,
city	It will take a controller to get details about city selected by user	TextEditingController	cityCont
dialogColor	It will set the dialog box color (Dialog box will open for selecting the country,state,city)	Color	Colors.grey.shade200,
textFieldDecoration	It will use to decorate the decoration of country,state,city textfield	InputDecoration	const InputDecoration( suffixIcon: Icon(Icons.arrow_drop_down_outlined)border: OutlineInputBorder())

Complete Source Code

Dart

import 'package:country_state_city_pro/country_state_city_pro.dart';
import 'package:flutter/material.dart';

class CountryStateCityScreen extends StatefulWidget {
  const CountryStateCityScreen({super.key});

  @override
  State<CountryStateCityScreen> createState() => _CountryStateCityScreenState();
}

class _CountryStateCityScreenState extends State<CountryStateCityScreen> {
  final TextEditingController countryCont = TextEditingController();
  final TextEditingController stateCont = TextEditingController();
  final TextEditingController cityCont = TextEditingController();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        // appBar: AppBar(
        //   title: const Text("Country State City Picker"),
        // ),
        body: Padding(
      padding: const EdgeInsets.all(8.0),
      child: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            CountryStateCityPicker(
                country: countryCont,
                state: stateCont,
                city: cityCont,
                dialogColor: Colors.grey.shade200,
                textFieldDecoration: const InputDecoration(
                    suffixIcon: Icon(Icons.arrow_drop_down_outlined),
                    border: OutlineInputBorder())),
          ],
        ),
      ),
    ));
  }
}

Output: