csc_picker_plus

A Flutter package for displaying a list of countries, states, and cities in Arabic, English, or the native language based on selection. It also allows users to search for countries, states, and cities worldwide.

Horizontal Layout	Show in Arabic Language	Vertical Layout
Country and State Only	Country Only

New Features

First package to support multilingual database: The library provides a database for countries, states, and cities with support for multiple languages, including Arabic.

Show in Arabic Language

Display countries and states in two languages: You can display countries and states in Arabic or English (or the native language if English is not available).
Display cities in the native language: The library allows displaying cities in the country's native language.
Search in two languages: You can search for countries and states either in Arabic or English, enhancing user experience.
Flexible location selection: The library allows developers to configure the selection process based on their needs, enabling users to choose only the country, or the country and state, or the country, state, and city.
Customizable display options: You can customize the design and appearance of the dropdowns to fit your app’s requirements.

How to Use

To use this Package, add csc_picker_plus as a dependency in your pubspec.yaml.

CSCPickerPlus(
  countryStateLanguage: CountryStateLanguage.arabic,
  // countryStateLanguage: CountryStateLanguage.englishOrNative,
  onCountryChanged: (value) {
    setState(() {
      countryValue = value;
    });
  },
  onStateChanged: (value) {
    setState(() {
      stateValue = value ?? '';
    });
  },
  onCityChanged: (value) {
    setState(() {
      cityValue = value ?? '';
    });
  },
),

you will get feedback in onChanged functions.

Parameters

Parameters	Type	Description
countryStateLanguage	CountryStateLanguage	This property controls the language of the country and state list. You can choose between Arabic or English (English or the country's native language if English is not available).
cityLanguage	CityLanguage	This property controls the language of the city list.
flagState	CountryFlag	Enable (get flag with country name) / Disable (Disable flag) / ShowInDropdownOnly (display flag in dropdown only).
layout	Layout	Toggle dropdown layout (Horizontal / Vertical).
showStates	Boolean	Enable/disable States dropdown (true / false).
showCities	Boolean	Enable/disable Cities dropdown (true / false).
dropdownDecoration	BoxDecoration	Dropdown box decoration to style your dropdown selector [OPTIONAL PARAMETER] (USE with disabledDropdownDecoration).
disabledDropdownDecoration	BoxDecoration	Disabled Dropdown box decoration to style your dropdown selector [OPTIONAL PARAMETER] (USE with disabled dropdownDecoration).
selectedItemStyle	TextStyle	To change selected item style.
dropdownHeadingStyle	TextStyle	To change DropdownDialog Heading style.
dropdownItemStyle	TextStyle	To change DropdownDialog Item style.
dropdownDialogRadius	double	To change DropdownDialogBox radius.
searchBarRadius	double	To change search bar radius.
defaultCountry	CscCountry	To select default country.
disableCountry	Boolean	Disable country dropdown (Note: use it with default country).
countryFilter	List of CscCountry	Show only countries in dropdown that you want.
countrySearchPlaceholder	String	Placeholder for country search field.
stateSearchPlaceholder	String	Placeholder for state search field.
citySearchPlaceholder	String	Placeholder for city search field.
countryDropdownLabel	String	Label/Title for country dropdown.
stateDropdownLabel	String	Label/Title for state dropdown.
cityDropdownLabel	String	Label/Title for city dropdown.

Example

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'CSC Picker Plus Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: const MyHomePage(title: 'CSC Picker Plus'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  /// Variables to store country state city data in onChanged method.
  String countryValue = "";
  String stateValue = "";
  String cityValue = "";
  String address = "";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(widget.title)),
      body: Center(
        child: Container(
          padding: const EdgeInsets.symmetric(horizontal: 20),
          height: 600,
          child: Column(
            children: [
              /// Adding CSC Picker Plus Widget in app
              CSCPickerPlus(
                /// Enable disable state dropdown [OPTIONAL PARAMETER]
                showStates: true,

                /// Enable disable city drop down [OPTIONAL PARAMETER]
                showCities: true,

                /// Enable (get flag with country name) / Disable (Disable flag) / ShowInDropdownOnly (display flag in dropdown only) [OPTIONAL PARAMETER]
                flagState: CountryFlag.ENABLE,

                /// Control the language of the country and state list [OPTIONAL PARAMETER]
                countryStateLanguage: CountryStateLanguage.englishOrNative,

                /// Control the language of the country and state list [OPTIONAL PARAMETER]
                cityLanguage: CityLanguage.native,

                /// Dropdown box decoration to style your dropdown selector [OPTIONAL PARAMETER] (USE with disabledDropdownDecoration)
                dropdownDecoration: BoxDecoration(
                  borderRadius: const BorderRadius.all(Radius.circular(10)),
                  color: Colors.white,
                  border: Border.all(color: Colors.grey.shade300, width: 1),
                ),

                /// Disabled Dropdown box decoration to style your dropdown selector [OPTIONAL PARAMETER]  (USE with disabled dropdownDecoration)
                disabledDropdownDecoration: BoxDecoration(
                  borderRadius: const BorderRadius.all(Radius.circular(10)),
                  color: Colors.grey.shade200,
                  border: Border.all(color: Colors.grey.shade300, width: 1),
                ),

                /// placeholders for dropdown search field [OPTIONAL PARAMETERS]
                // countrySearchPlaceholder: "Country",
                // stateSearchPlaceholder: "State",
                // citySearchPlaceholder: "City",

                /// labels for dropdown [OPTIONAL PARAMETERS]
                countryDropdownLabel: "Country",
                stateDropdownLabel: "State",
                cityDropdownLabel: "City",

                /// Default Country [OPTIONAL PARAMETER]
                // defaultCountry: CscCountry.Yemen,

                /// Country Filter [OPTIONAL PARAMETER]
                // countryFilter: const [
                //   CscCountry.Yemen,
                //   CscCountry.Saudi_Arabia,
                //   CscCountry.United_States,
                // ],

                /// Disable country dropdown (Note: use it with default country)
                // disableCountry: true,

                /// selected item style [OPTIONAL PARAMETER]
                selectedItemStyle: const TextStyle(
                  color: Colors.black,
                  fontSize: 14,
                ),

                /// DropdownDialog Heading style [OPTIONAL PARAMETER]
                dropdownHeadingStyle: const TextStyle(
                  color: Colors.black,
                  fontSize: 17,
                  fontWeight: FontWeight.bold,
                ),

                /// DropdownDialog Item style [OPTIONAL PARAMETER]
                dropdownItemStyle: const TextStyle(
                  color: Colors.black,
                  fontSize: 14,
                ),

                /// Dialog box radius [OPTIONAL PARAMETER]
                dropdownDialogRadius: 10.0,

                /// Search bar radius [OPTIONAL PARAMETER]
                searchBarRadius: 10.0,

                /// triggers once country selected in dropdown
                onCountryChanged: (value) {
                  setState(() {
                    /// store value in country variable
                    countryValue = value;
                  });
                },

                /// triggers once state selected in dropdown
                onStateChanged: (value) {
                  if (value != null) {
                    setState(() {
                      ///store value in state variable
                      stateValue = value;
                    });
                  }
                },

                /// triggers once city selected in dropdown
                onCityChanged: (value) {
                  if (value != null) {
                    setState(() {
                      ///store value in city variable
                      cityValue = value;
                    });
                  }
                },
              ),

              /// print newly selected country state and city in Text Widget
              TextButton(
                onPressed: () {
                  setState(() {
                    address = "$cityValue, $stateValue, $countryValue";
                  });
                },
                child: const Text("Print Data"),
              ),
              Text(address),
            ],
          ),
        ),
      ),
    );
  }
}

Contact

For any inquiries or questions, please feel free to contact me:

Email: eng.hezbr@gmail.com

GitHub: Hezbr Al-humaidi

LinkedIn: Hezbr Al-humaidi

Special Thanks to

Altaf Razzaque, csc_picker csc_picker