A Flutter package that provides an easy and customizable country phone code picker widget!


This package comes with a lot of customization allowing you to build the widget as per your preferences with ease!

Parameters for CountryPhoneCodePicker Widget

All you can set parametersWhat they meanDefault
countryControllerYou need to pass the instance of the countryControllerNo Default Value
defaultCountryCodeAllows you to set a default/initially selected countryAfghanistan
heightHeight of the picker widget45
widthWidth of the picker widget80
flagHeightHeight of the flag inside picker widget35
flagWidthWidth of the flag inside picker widget50
backgroundColorBackground color of picker widgetColors.transparent
borderRadiusControl the radius of the curve around the corners of border of the picker widget15
flagBorderRadiusControl the radius of the curve around the corners of flag image5
borderColorColor of the border of picker widgetColors.transparent
borderWidthWidth of the border of picker widget0
contentPaddingPadding inside the picker widgetEdgeInsets.symmetric(horizontal:5, vertical:5)
countryNameTextStyleStyle the font of country name inside picker widgetTextStyle(fontSize: 14, color: Colors.black)
countryPhoneCodeTextStyleStyle the font of phone code inside the picker widgetTextStyle(color: Colors.black, fontSize: 14)
showFlagFlag is shown in the picker widget if value is truetrue
showNameName is shown in the picker widget if value is truefalse
showPhoneCodePhone Code is shown in the picker widget if value is truefalse
actionIconPicker Widget IconIcon(Icons.arrow_drop_down_rounded)
searchSheetBackgroundBackground color of search bar sheetColor(0xfffafafa)
searchBarLeadingIconBack Button iconIcon(Icons.arrow_back_outlined, color: Colors.black)
searchBarHintTextHint text of text fieldnull
searchBarHintStyleStyle the hint textTextStyle()
searchBarLabelTextLabel text of text fieldnull
searchBarLabelStyleStyle the label textTextStyle()
searchBarHelperTextHelper text of text fieldnull
searchBarHelperStyleStyle the helper textTextStyle()
searchBarPrefixTextPrefix text of text fieldnull
searchBarPrefixStyleStyle the prefix textTextStyle()
searchBarPrefixIconPrefix icon of text fieldIcon(Icons.search, color: Colors.black)
searchBarContentPaddingPadding of the text field contentEdgeInsets.symmetric(horizontal: 10, vertical: 5)
borderBorder of text fieldOutlineInputBorder(borderSide: BorderSide.none)
errorBorderError border of text fieldOutlineInputBorder(borderSide: BorderSide.none)
focusedBorderFocused border of text fieldOutlineInputBorder(borderSide: BorderSide.none)
disabledBorderDisabled border of text fieldOutlineInputBorder(borderSide: BorderSide.none)
focusedErrorBorderFocused error border of text fieldOutlineInputBorder(borderSide: BorderSide.none)
enabledBorderEnabled border of text fieldOutlineInputBorder(borderSide: BorderSide.none)
searchBarCursorColorColor of cursor in text fieldColors.black
searchBarCursorHeightHeight of cursor in text field20
searchBarCursorWidthWidth of cursor in text field2
styleStyle the input inside text fieldTextStyle()
searchBarInitialValueInitial query of text fieldEmpty string
keyboardTypeType of input in text fieldTextInputType.text
showCursorCursor is visible if value is truetrue

Parameters for specific detail widget

All you can set parametersWhat they meanDefault
heightAllows you to set height to the widget0
widthAllows you to set width to the widget0
paddingPadding inside the widgetEdgeInsets.zero
borderRadiusCurve around the corners of the border of widget0
colorColor of the widgetColors.transparent
borderColorColor of the borderColors.black
borderStyleStyle of the borderBorderStyle.solid
borderWidthWidth of the border0
textStyleStyle the text inside widgetTextStyle(fontSize: 18)

Getting started

Just include this in your pubspec.yaml

  country_phone_code_picker: <VERSION>

or run this in your terminal

  flutter pub add country_phone_code_picker


Before starting the use of Country Code Picket widgets, you need to initialize the CountryController. Use the below function to initialize the CountryController


Make sure you initialize the CountryController before using the widgets. A safe place to initialize would be just outside the MaterialApp!

You can access the instance of the CountryController like this

CountryController countryController = getCountryController();

To simply get a Country Picker widget, try:

  countryController: countryController,
  Country(name: 'India', countryCode: 'IN', phoneCode: '+91'),
  borderRadius: 5,
  borderWidth: 1,
  borderColor: Colors.grey,
  style: const TextStyle(fontSize: 16),
  searchBarHintText: 'Search by name',

To display a specific property about the country for example - country code, phone code, name, flag

  height: 30,
  width: 50,
  textStyle: const TextStyle(fontSize: 15),
  borderWidth: 1,
  borderRadius: 5,
  borderColor: Colors.black,

To fetch details about the selected country, try:

CountryController countryController = getCountryController(); //Get the instance of the controller

Additional information

Hop on to :- samitkapoor/country_phone_code_picker to find more information, contribute, file issues regarding the package!