country_state_city_dropdown 0.2.0

A customizable Flutter package for searchable, cascading Country, State, and City dropdowns using JSON data.

🌍 Country State City Dropdown

A Flutter package that provides dynamic, cascading dropdowns for selecting Country, State, and City using local JSON data. Now upgraded to use Material 3 DropdownMenuFormField for native-like search, filtering, and form validation.

✨ Features

✅ Cascading dropdowns (Country → State → City)
✅ Built-in search and filtering using Material 3 DropdownMenuFormField
✅ Form Validation Support: Integrate seamlessly with Form and GlobalKey<FormState>
✅ Extremely Customizable: Exposes almost all properties of DropdownMenuFormField for full control.
✅ No external dependencies
✅ Easy integration

🚀 Getting Started

Add the dependency in your pubspec.yaml file:

dependencies:
  country_state_city_dropdown: ^0.2.0

Then run:

flutter pub get

📦 Usage

Here’s an example showing validation and some customization:

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

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(useMaterial3: true),
      home: Scaffold(
        appBar: AppBar(title: const Text('Country State City Picker')),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Form(
            key: GlobalKey<FormState>(),
            child: Column(
              children: [
                CountryStateCityPicker(
                  countryLabel: const Text("Select Country"),
                  leadingIcon: const Icon(Icons.location_on),
                  onCountryChanged: (country) => print("Country: ${country.name}"),
                  onStateChanged: (state) => print("State: ${state.name}"),
                  onCityChanged: (city) => print("City: ${city.name}"),
                  countryValidator: (value) => value == null ? "Please select a country" : null,
                ),
                ElevatedButton(
                  onPressed: () {
                    // Trigger validation
                  },
                  child: const Text('Submit'),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

🛠 Customization

The CountryStateCityPicker widget exposes many properties from the underlying DropdownMenuFormField. Below are some of the most common ones:

Parameter	Type	Description
countryLabel, stateLabel, cityLabel	Widget?	Custom labels for each level.
width	double?	Set a fixed width for all dropdowns.
spacing	double	Vertical space between dropdowns (Default: 12).
leadingIcon	Widget?	Icon to display before the label.
trailingIcon	Widget?	Icon to display after the label.
hintText	String?	Text that suggests what sort of input the field accepts.
enableSearch	bool	Whether searching is enabled (Default: true).
enableFilter	bool	Whether filtering is enabled (Default: false).
menuStyle	MenuStyle?	Customize the dropdown menu appearance.
inputDecorationTheme	InputDecorationTheme?	Customize the input field appearance.
countryValidator, stateValidator, cityValidator	FormFieldValidator	Custom validation logic for each level.

And many more including keyboardType, textAlign, autovalidateMode, onSaved, etc.

📁 Example

Check the /example folder for a complete working demo with a results card and advanced customization.

📄 License

This project is licensed under the MIT License.

---

Made with ❤️ by @iznurrehmankhan