A flutter package to display a country, states, and cities. In addition it gives the possibility to select a list of countries, States and Cities depends on Selected, also you can search country, state, and city all around the world.

Overview

csc_picker

version version

A flutter package to display a country, states, and cities. In addition it gives the possibility to select a list of countries, States and Cities depends on Selected, also you can search country, state, and city all around the world.

Horizontal Layout Vertical Layout

How to Use

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

      	CSCPicker(
              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
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 DefaultCountry To select default country
disableCountry DisableCountry Disable country dropdown (Note: use it with default country)
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
countryDropdownLabel String Label/Title for state dropdown
countryDropdownLabel String Label/Title for city dropdown

Example

_cscPickerKey = GlobalKey(); return Scaffold( appBar: AppBar( title: Text(widget.title), ), body: Center( child: Container( padding: EdgeInsets.symmetric(horizontal: 20), height: 600, child: Column( children: [ ///Adding CSC Picker Widget in app CSCPicker( ///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.DISABLE, ///Dropdown box decoration to style your dropdown selector [OPTIONAL PARAMETER] (USE with disabledDropdownDecoration) dropdownDecoration: BoxDecoration( borderRadius: 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: BorderRadius.all(Radius.circular(10)), color: Colors.grey.shade300, border: Border.all(color: Colors.grey.shade300, width: 1)), ///placeholders for dropdown search field countrySearchPlaceholder: "Country", stateSearchPlaceholder: "State", citySearchPlaceholder: "City", ///labels for dropdown countryDropdownLabel: "*Country", stateDropdownLabel: "*State", cityDropdownLabel: "*City", ///Default Country //defaultCountry: DefaultCountry.India, ///Disable country dropdown (Note: use it with default country) //disableCountry: true, ///selected item style [OPTIONAL PARAMETER] selectedItemStyle: TextStyle( color: Colors.black, fontSize: 14, ), ///DropdownDialog Heading style [OPTIONAL PARAMETER] dropdownHeadingStyle: TextStyle( color: Colors.black, fontSize: 17, fontWeight: FontWeight.bold), ///DropdownDialog Item style [OPTIONAL PARAMETER] dropdownItemStyle: 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) { setState(() { ///store value in state variable stateValue = value; }); }, ///triggers once city selected in dropdown onCityChanged: (value) { 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: Text("Print Data")), Text(address) ], )), ), ); } } ">
import 'package:csc_picker/csc_picker.dart';
import 'package:flutter/material.dart';

/// This is a implementation of the Country State City Picker.
void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'CSC Picker',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'CSC Picker'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState 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) {

    GlobalKey<CSCPickerState> _cscPickerKey = GlobalKey();

    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Container(
            padding: EdgeInsets.symmetric(horizontal: 20),
            height: 600,
            child: Column(
              children: [
                ///Adding CSC Picker Widget in app
                CSCPicker(
                  ///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.DISABLE,

                  ///Dropdown box decoration to style your dropdown selector [OPTIONAL PARAMETER] (USE with disabledDropdownDecoration)
                  dropdownDecoration: BoxDecoration(
                      borderRadius: 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: BorderRadius.all(Radius.circular(10)),
                      color: Colors.grey.shade300,
                      border:
                      Border.all(color: Colors.grey.shade300, width: 1)),

                  ///placeholders for dropdown search field
                  countrySearchPlaceholder: "Country",
                  stateSearchPlaceholder: "State",
                  citySearchPlaceholder: "City",

                  ///labels for dropdown
                  countryDropdownLabel: "*Country",
                  stateDropdownLabel: "*State",
                  cityDropdownLabel: "*City",

                  ///Default Country
                  //defaultCountry: DefaultCountry.India,

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

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

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

                  ///DropdownDialog Item style [OPTIONAL PARAMETER]
                  dropdownItemStyle: 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) {
                    setState(() {
                      ///store value in state variable
                      stateValue = value;
                    });
                  },

                  ///triggers once city selected in dropdown
                  onCityChanged: (value) {
                    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: Text("Print Data")),
                Text(address)
              ],
            )),
      ),
    );
  }
}

Special Thanks to

Comments
  • initialize default value to country and state dropdown

    initialize default value to country and state dropdown

    I want to initize the default value to dropdown Eg. United States Of America as country and Taxes as a state. @altafc22 can you include field for it Thanks

    opened by bipindubey-technoark 11
  • get only country name as value instead getting country code with flag and country name

    get only country name as value instead getting country code with flag and country name

    on country change i am getting country code with flag and full country name

    can i get only country name

    EG. CURRENT BEHAVIOUR : IN INDIAN FLAG INDIA

    EXPECTED BEHAVIOUR: INDIA

    opened by bipindubey-technoark 7
  • customize height and padding in dropdown and allow to change the border as well

    customize height and padding in dropdown and allow to change the border as well

    I saw your component today and it is really nice and i wanted it .... i have done R&D on it from last 10-15 days but nothing was so as good as your component. I want to customize little bit of your component . i want just ui changes so that it looks as other elements in projects,

    opened by bipindubey-technoark 6
  • Version 0.2.6

    Version 0.2.6

    Closes #23

    • Introduce the currentCountry, currentState, and currentCity properties to allow previously selected values to remain
    • Sort CSCPicker constructor first
    • Move super.initState before other calls in csc_picker.dart
    • Fix some typos, method names
    • Fix some async method types
    opened by GroovinChip 5
  • Request: Method to customize default texts

    Request: Method to customize default texts

    Hello and thank you very much for developing this module, I have a small request to be able to customize the texts that are shown in the search boxes such as "State", "Search State", "Search Country" and "Search city" this would allow internationalization correctly these labels and increase the potential of this module. Thank you

    opened by soullest 3
  • Fetching Saved Country,State,City from firestore and displaying to user

    Fetching Saved Country,State,City from firestore and displaying to user

    I am using version 0.2.6 I am trying to set the currentState and CurrentCity and CurrentCountry using setState((){ }); when fetching saved data from Firestore. now the problem is When i try to set the data i get this error " Unhandled Exception: setState() called after dispose(): CSCPickerState#a6452(lifecycle state: defunct, not mounted) " Is this expected behaviour or i am doing something wrong here

    opened by fatfishdigital 2
  • Update select_status_model.dart

    Update select_status_model.dart

    added country code, ISO 2, ISO 3 and French name country.json list updated https://hlmdigital.com/country.json files to modify: assets/country.json model/select_status_model.dart csc_picker.dart*

    opened by Lab360-inc 2
  • Cannot store selected flag icon in database and how to change background of dropdown box ?

    Cannot store selected flag icon in database and how to change background of dropdown box ?

    I'm trying to store the selected country flag in my database when ever a country is selected i can't able to see the country flag in my debug console as well as in my database why ? . How to change the dropdown box of country ,state ,city ? I want the dropdown box background as yellow and text inside it as white

    Steps tried to reproduce:

    CSCPicker(
     flagState: CountryFlag.SHOW_IN_DROP_DOWN_ONLY, // tried CountryFlag.ENABLE
    );
    

    country country_box bg

    Editor : Visual studio code Flutter version : 2.0.2

    opened by naveenbharadwaj19 2
  • Disable country dropdown

    Disable country dropdown

    Hi, is it possible to lock the country drop down ? For example I set a default country, then I just want to be able to select the state and the town from this default country already set by default.

    opened by CSharper63 1
  • Show States/Cities Feature

    Show States/Cities Feature

    Love the look of this plugin but it would be even better if you were able to configure it so that you can hide the State and City dropdowns if the relevant parameter is set to false. Is that something you'd consider adding?

    opened by wickyt 1
  • OnCountry changed calling build method again which is rerendering other field as well

    OnCountry changed calling build method again which is rerendering other field as well

    I have firstname, lastName ,country and state.

    I have initialValue in firstname as john and lastname as warner,

    now i change my firstname from john to john123 and then select country then firstname again set to john.

    This is because on country changed it is calling build methof again which is reinitializing the value of other field.

    opened by bipindubey-technoark 1
  •  CSCPickerState._onSelectedCountry

    CSCPickerState._onSelectedCountry

    E/flutter (20371): [ERROR:flutter/runtime/dart_vm_initializer.cc(41)] Unhandled Exception: Null check operator used on a null value E/flutter (20371): #0 CSCPickerState._onSelectedCountry. (package:csc_picker/csc_picker.dart:741:35) E/flutter (20371): #1 State.setState (package:flutter/src/widgets/framework.dart:1109:30) E/flutter (20371): #2 CSCPickerState._onSelectedCountry (package:csc_picker/csc_picker.dart:723:5) E/flutter (20371): #3 CSCPickerState._setDefaultCountry (package:csc_picker/csc_picker.dart:618:7) E/flutter (20371): #4 CSCPickerState.getCountries (package:csc_picker/csc_picker.dart:647:5) E/flutter (20371): E/flutter (20371): carbon carbon (1)

    opened by ghost 3
  • Added iso codes from countries and region codes to country.json

    Added iso codes from countries and region codes to country.json

    Added ISO 3166 country codes to country.json. I also added region codes where I could but there's no international standard. I used this list and fixed what I knew, but there are a lot of unmatched entries.

    I did not change anything with relation to the public interface as I don't know the direction you want to take the package.

    opened by cvanvlack 0
  • For Layout.vertical neither showStates=false nor showCities=false are respected

    For Layout.vertical neither showStates=false nor showCities=false are respected

    Describe the bug When using Layout.vertical neither showStates=false nor showCities=false are respected.

    To Reproduce Steps to reproduce the behavior:

    1. Open example
    2. Go to line 55 and change to
    ///Enable disable state dropdown [OPTIONAL PARAMETER]
    showStates: false,
    
    /// Enable disable city drop down [OPTIONAL PARAMETER]
    showCities: false,
    layout: Layout.vertical,
    

    Expected behavior For vertical layouts you should be able to hide the cities or states.

    opened by cvanvlack 0
Owner
Altaf Razzaque
Mobile Application Developer, Software Developer, UI/UX Designer
Altaf Razzaque
Validating numbers and providing necessary detail base on selected country

international_phone_field ?? Validating numbers and providing necessary detail base on selected country ?? . The pacakge comes with enough detail abou

Rexford Asamoah 6 Jun 30, 2022
Foody - Flutter project to display foods to clients and display charts and has a lot of features , two flutter apps : Android and Web

Foody Flutter project to display foods to the clients and use charts and use a lot of features to complete the process (HUGE APP) There two apps: Andr

ABDULKARIMALBAIK 1 Feb 7, 2022
A Flutter project that gives basic flutter design to implement a login UI

Login UI Design A Flutter project that gives basic flutter design to implement a

CABREX 9 Nov 8, 2022
Display all stand alone widgets in a nice UI

flutter_organized_widgets Display all stand alone widgets in a nice UI How to install Add to dependencies: flutter_organized_widgets: git: https

Norbert Kozsir 10 Nov 18, 2022
A flutter package which makes it easier to display the difference between two images.

?? Before After A flutter package which makes it easier to display the differences between two images.. The source code is 100% Dart, and everything r

Sahil Kumar 741 Dec 30, 2022
This package provides some widgets you can use to create a smooshy UI.

Dough Library Squishy widgets for Flutter. Quick Links Dough Demos Here are a few samples of the different widgets provided by this repo. You can find

Josiah Saunders 530 Dec 23, 2022
A textField widget to help display different style pin

pin_input_text_field 中文版点我 PinInputTextField is a TextField widget to help display different style pin. It supports all the platforms flutter supports

Tino 324 Jan 4, 2023
flutter mutli search 👋

flutter mutli search ??

mejdi hafiane 19 Nov 7, 2022
Flutter Widgets that you can touch and feel

Flutter widgets you haven't used yet. Problems that proximity solves Currently, Flutter has a lot of useful pre-built widgets, no, too many widgets. T

Masahiro Aoki 32 Nov 8, 2022
A TypeAhead widget for Flutter, where you can show suggestions to users as they type

Flutter TypeAhead A TypeAhead (autocomplete) widget for Flutter, where you can show suggestions to users as they type Features Shows suggestions in an

null 661 Jan 5, 2023
With flutter tags you can create selectable or input tags that automatically adapt to the screen width

flutter_tags Create beautiful tags quickly and easily. Installing Add this to your package's pubspec.yaml file: dependencies: flutter_tags: "^0.4.9+

Antonino Di Natale 417 Dec 21, 2022
HSV(HSB)/HSL/RGB/Material color picker inspired by all the good design for your amazing flutter apps.

flutter_colorpicker HSV(HSB)/HSL/RGB/Material color picker inspired by all the good design for your amazing flutter apps. Adorable color pickers out o

Dark Knight 279 Dec 30, 2022
Allows widgets to be zoomed in and out by inserting a OverlayEntry which allows the widget to be on the front at all times.

zoom_pinch_overlay An instagram style pinch and zoom widget for all platform completely written in pure dart! All other "zoom_pinch" package doesnt di

Samuel 18 Nov 29, 2022
A Horizontal List view With Lots of modification including a scaled current item.

Pub.dev Scaled List A Horizontal List view With Lots of modification including a scaled current item. Provided with curved custom painting and Dots in

Hosain Mohamed 35 Nov 5, 2022
A Very Good Infinite List Widget created by Very Good Ventures. Great for activity feeds, news feeds, etc. 🦄

InfiniteList comes in handy when building features like activity feeds, news feeds, or anywhere else where you need to lazily fetch and render content for users to consume.

Very Good Open Source 102 Dec 12, 2022
A flutter package to help you beautify your app popups.

flutter_beautiful_popup 中文 A flutter package to help you beautify your app popup, can be used in all platform.Live Demo. Preview: Getting Started Add

朱嘉伟 568 Dec 30, 2022
A simple package that provides you with some widgets and cutom clippers which implements the shape of a coupon card.

Coupon UI Kit A simple package that provides you with some widgets and cutom clippers which implements the shape of a coupon card. The example contain

AbdulMuaz Aqeel 15 Dec 20, 2022
A nice clean onboarding screen for your e-commerce app that can run both Andriod and iOS devices because it builds with flutter

A nice clean onboarding screen for your e-commerce app that can run both Andriod and iOS devices because it builds with flutter

null 23 Dec 4, 2022
A customizable segment tab control. Can be used with or without TabView.

A customizable segment tab control. Can be used with or without TabView. Features The package provides an advanced segmented control widget based on t

null 11 Nov 16, 2022