Search packages, repositories and app categories

Package detailsv0.1.2

ola_like_country_picker

A new Flutter package for country picker. ola_like_country_picker provides a bottom sheet allowing a user to select a country(with flag and dialcode)(optional) from a list.

30-day downloads
40
Likes
19
Pub points
40

Install package

flutter pub add ola_like_country_picker

Package Overview

Package selection guidance compiled from public package information, community data, and project usage.

A Flutter package that provides a bottom sheet for selecting countries, displaying flags and optional dial codes. It offers a clean, user-friendly interface for country selection, ideal for forms requiring international phone number input. The package is lightweight and integrates seamlessly into existing Flutter apps. It supports customization and is designed with a modern, intuitive UX in mind.

Use cases

  • International phone number input
  • User profile country selection
  • Multi-language app localization
  • Travel or shipping form country picker
  • Authentication flow country selection

Key features

  • Bottom sheet UI
  • Country flags display
  • Optional dial code support
  • Customizable appearance
  • Easy integration with Flutter forms
  • Lightweight and fast

Suitable for

  • Mobile apps needing country selection
  • Forms requiring phone number input
  • Apps targeting global users
  • Developers seeking simple country picker
  • UI-focused Flutter projects

Considerations

  • Limited to country and dial code only
  • No built-in search functionality
  • Does not support region filtering
  • Requires manual handling of selected country data
  • No offline mode specified

Original README

Original README snapshot from the linked source repository. Visit the repository for the latest content.

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)

Installation

https://pub.dev/packages/ola_like_country_picker#-installing-tab-

  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
Parameters
parameter default required type remark
onCountrySelected null yes OnCountrySelectedCallback called when country is selected.
showTitle true no bool whether to show title or not.
titleText "Select your country" no String text for title.
  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
parameter default required type remark
countryJsonList country_codes no List<Map<String, String>> can be used to specify own set of sublist of countries from the variable country_codes
flagWidth 25 no double width of flag
flagHeight 25 no double height of flag
showFlag true no bool whether to show flag or not
showDialCode true no bool whether to show dial code or not
dialCodePrefix '+' no String The prefix added to the dial code for e.g +91 here prefix is '+'
itemTitleStyle null no TextStyle Used to change style of Country title e.g TextStyle(fontSize:30)
dialCodeStyle null no TextStyle Used to change style of Country's dial code e.g TextStyle(backgroundColor:Colors.green[400])
onSelected null no OnCountrySelectedCallback When 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 
    ...
    ...
    

Support

The simplest way to show your support is by giving the project a star.

You can also support by becoming a patron on Patreon:

Patreon

Or by making a single donation by buying a coffee:

Buy Me A Coffee

Categories

Source repository

Projects using this package

No data available yet.