ka4_country_picker_plus #

By ka4.tech

Countries, codes, flags and several way of picking them at your service...one widget away...

Installation #

Add this to your package's pubspec.yaml file:

dependencies:
  ka4_country_picker_plus: ^1.0.0

Then run:

flutter pub get

CountryPickerDropdown example

 CountryPickerDropdown(
            initialValue: 'AR',
            itemBuilder: _buildDropdownItem,
            itemFilter:  ['AR', 'DE', 'GB', 'CN'].contains(c.isoCode),
            priorityList:[
                    CountryPickerUtils.getCountryByIsoCode('GB'),
                    CountryPickerUtils.getCountryByIsoCode('CN'),
                  ],
            sortComparator: (Country a, Country b) => a.isoCode.compareTo(b.isoCode),
            onValuePicked: (Country country) {
              print("${country.name}");
            },
          )

 Widget _buildDropdownItem(Country country) => Container(
        child: Row(
          children: <Widget>[
            CountryPickerUtils.getDefaultFlagImage(country),
            SizedBox(
              width: 8.0,
            ),
            Text("+${country.phoneCode}(${country.isoCode})"),
          ],
        ),
      );

CountryPickerDialog example

void _openCountryPickerDialog() => showDialog(
        context: context,
        builder: (context) => Theme(
            data: Theme.of(context).copyWith(primaryColor: Colors.pink),
            child: CountryPickerDialog(
                titlePadding: EdgeInsets.all(8.0),
                searchCursorColor: Colors.pinkAccent,
                searchInputDecoration: InputDecoration(hintText: 'Search...'),
                isSearchable: true,
                title: Text('Select your phone code'),
                onValuePicked: (Country country) =>
                    setState(() => _selectedDialogCountry = country),
                itemFilter: (c) => ['AR', 'DE', 'GB', 'CN'].contains(c.isoCode),
                priorityList: [
                  CountryPickerUtils.getCountryByIsoCode('TR'),
                  CountryPickerUtils.getCountryByIsoCode('US'),
                 ],
                itemBuilder: _buildDialogItem)),
      );

CountryPickerCupertino example

 void _openCupertinoCountryPicker() => showCupertinoModalPopup<void>(
      context: context,
      builder: (BuildContext context) {
        return CountryPickerCupertino(
          pickerSheetHeight: 300.0,
          onValuePicked: (Country country) =>
              setState(() => _selectedCupertinoCountry = country),
          itemFilter: (c) => ['AR', 'DE', 'GB', 'CN'].contains(c.isoCode),
          priorityList: [
            CountryPickerUtils.getCountryByIsoCode('TR'),
            CountryPickerUtils.getCountryByIsoCode('US'),
          ],
        );
      });

Animation with InitCountryCode example

InitCountryCode(
  selectedCountry: myCountry,
  animationType: AnimationType.fromBottom,
  duration: Duration(milliseconds: 300),
  onValuePicked: (country) {
       setState(() {
          myCountry = country;
       });
     },
)

MyCountryPicker example

Displays a country's flag and phone code. Useful for showing the selected country in a form field or button.

MyCountryPicker(
  country: myCountry,
  showFlag: true,
  needNumber: true,
  textStyle: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
  padding: 8.0,
)

MyCountryPickerDialog example

A search dialogue to select a country. Can be used within showDialog or showGeneralDialog.

MyCountryPickerDialog(
  searchHint: 'Search for a country...',
  selectHint: 'Select Country',
  onValuePicked: (Country country) {
    print("Picked: ${country.name}");
  },
)

Country Bottom Sheet example

openCountryBottomSheet(
  context,
  search: 'Search...',
  selectedHint: 'Select Country',
  sheetHeight: 600, // Optional
  onValuePicked: (Country country) {
    print("Picked: ${country.name}");
  },
);

Credits #

Thanks goes to country-flags repo for the flag image assets.