flutter_country_state 1.0.0

An intuitive and versatile Flutter package designed to simplify the display of countries, states, and cities within your application. With seamless integration, it offers a comprehensive list of count [...]

flutter_country_state

An intuitive and versatile Flutter package designed to simplify the display of countries, states, and cities within your application. With seamless integration, it offers a comprehensive list of countries worldwide, allowing users to effortlessly navigate through states and cities. Featuring a user-friendly search functionality and extensive customization options, it can be easily integrated into both bottom sheets and full-screen layouts, enhancing the user experience and streamlining development.

This works on both Android, Ios, and Web

Example

Please run the app in the Example folder

Installation

• add the dependency to your pubspec.yaml file.

dependencies:
  flutter:
    sdk: flutter
  flutter_country_state:

You can also change the style of the text of list of the country, states, and cities

-searchHint

-substringBackground

-subStringStyle

-style

-searchStyle

selectedCountryBackgroundColor

notSelectedCountryBackgroundColor

selectedStateBackgroundColor

notSelectedStateBackgroundColor

selectedCityBackgroundColor

notSelectedCityBackgroundColor

onSelectCountry

onSelectedState

countryHeaderStyle

stateHeaderStyle

onSelectedCity

---

Use It

This will display the list of countries in the world

showModalBottomSheet(
  isScrollControlled: true,
  context: context,
  isDismissible: false,
  builder: (context) =>  SizedBox(
    height: MediaQuery.of(context).size.height * 0.7,
    child: ShowCountryDialog(
      searchHint: 'Search for a country',
      substringBackground: Colors.black,
      style: const TextStyle(color: Colors.black,fontWeight: FontWeight.w500),
      searchStyle: const TextStyle(color: Colors.black),
      subStringStyle: const TextStyle(color: Colors.white),
      selectedCountryBackgroundColor: Colors.pink,
      notSelectedCountryBackgroundColor: Colors.white,
      onSelectCountry: (){setState(() {
        selectedCountry = Variables.country;
      });},
    ),
  ),

);

This will display the states of the country selected

showModalBottomSheet(
 isScrollControlled: true,
 context: context,
 isDismissible: false,
 builder: (context) => SizedBox(
   height: MediaQuery.of(context).size.height * 0.7,
   child: ShowStateDialog(
     style: const TextStyle(color: Colors.black,fontWeight: FontWeight.w500),
     subStringStyle: const TextStyle(color: Colors.white),
     substringBackground: Colors.black,
     selectedStateBackgroundColor: Colors.orange,
     notSelectedStateBackgroundColor: Colors.white,
     onSelectedState: (){
       setState(() {
         selectedState = Variables.state;
       });
     },
   ),
 ),

);

This will display the cities of the state selected

showModalBottomSheet(
isScrollControlled: true,
context: context,
isDismissible: false,
builder: (context) => SizedBox(
  height: MediaQuery.of(context).size.height * 0.7,
  child: ShowCityDialog(
    style: const TextStyle(color: Colors.black,fontWeight: FontWeight.w500),
    subStringStyle: const TextStyle(color: Colors.white),
    substringBackground: Colors.black,
    selectedCityBackgroundColor: Colors.orange,
    notSelectedCityBackgroundColor: Colors.white,
    onSelectedCity: (){
      setState(() {
        selectedCity = Selected.city;
      });
    },
  ),
),

);

Next goal

• [ x ] Add countries flag
• [ x ] Add countries code