Ola Like Country Picker

A new country picker Flutter package built in Dart.

Introduction

It is Flutter plug-n-play country picker package.

  1. Simple two lines of code. Initialize and Launch.
CountryPicker countryPicker = CountryPicker(
                                onCountrySelected:(country){
                                    print(country)
                                },
                              );
countryPicker.launch(context)
  1. To use the Country Picker look at the example below :

Example Usage:

class _MyHomePageState extends State<MyHomePage> {
  CountryPicker countryPicker;
  Country country = Country.fromJson(countryCodes[0]); // select initial country 

  @override
  void initState() {
    super.initState();
    countryPicker = CountryPicker(onCountrySelected: (Country country) {
      print(country);
      setState(() {
        this.country = country;
      });
    });
  }
  
    @override
  Widget build(BuildContext context) {
    // To simply launch the country picker
    // use countryPicker.launch(context)
    // to forcefully dismiss use countryPicker.dismiss()
    // simple example could be
    return GestureDetector(
      child: Container(
        decoration: BoxDecoration(
          image: DecorationImage(
            image:
                AssetImage(country.flagUri, package: 'ola_like_country_picker'),
          ),
        ),
      ),
      onTap: () {
        countryPicker.launch(context);
      },
    );

  }  
}

Output

  1. To simply use country list view any where use CountryListView() and to modify attributes like flagWidth, flagHeight, countryTitle style etc use below arguments like
CountryListView(flagWidth:50, flagHeight:50 , itemTitleStyle: TextStyle(fontSize:20)); 

Example Usage:

return MaterialApp(
  theme: ThemeData(primarySwatch: Colors.purple),
  home: Scaffold(
    appBar: AppBar(
      title: Text('Select Country'),
    ),
    body: CountryListView(),
  ),
);

Output

Parameters

parameterdefaultrequiredtyperemark
countryJsonListcountry_codesnoList<Map<String, String>>can be used to specify own set of sublist of countries from the variable country_codes
flagWidth25nodoublewidth of flag
flagHeight25nodoubleheight of flag
showFlagtruenoboolwhether to show flag or not
showDialCodetruenoboolwhether to show dial code or not
dialCodePrefix'+'noStringThe prefix added to the dial code for e.g +91 here prefix is '+'
itemTitleStylenullnoTextStyleUsed to change style of Country title e.g TextStyle(fontSize:30)
dialCodeStylenullnoTextStyleUsed to change style of Country's dial code e.g TextStyle(backgroundColor:Colors.green400)
onSelectednullnoOnCountrySelectedCallbackWhen Any Country is selected what callback has to be executed e.g CountryListView(onSelected: (Country country){ print(country.toString() });
  1. To use the own version of CountryListView() with CountryPicker() use setCountryListView() method before calling launch() e.g.
    c = CountryPicker(onCountrySelected: (Country country) {
      print(country);
      setState(() {
        this.country = country;
      });
    });
    CountryListView clv = CountryListView(showFlag:false); //own version of CountryListView
    c.setCountryListView(clv);
    ...
    ...
    // Call c.launch(context) in GestureDetector() or other listeners 
    ...
    ...
    

Libraries

ola_like_country_picker