Git Product home page Git Product logo

countrycodepicker's Introduction

GitHub code size

All Contributors

GitHub contributors Pub Linkedin LinkedIn Linkedin LinkedIn

country_code_picker

A flutter package for showing a country code selector.

It supports i18n for 70 languages.

Check the example on web! https://imtoori.dev/CountryCodePicker/#/

Usage

Just put the component in your application setting the onChanged callback.

@override
 Widget build(BuildContext context) => new Scaffold(
     body: Center(
       child: CountryCodePicker(
         onChanged: print,
         // Initial selection and favorite can be one of code ('IT') OR dial_code('+39')
         initialSelection: 'IT',
         favorite: ['+39','FR'],
         // optional. Shows only country name and flag
         showCountryOnly: false,
         // optional. Shows only country name and flag when popup is closed.
         showOnlyCountryWhenClosed: false,
         // optional. aligns the flag and the Text left
         alignLeft: false,
       ),
     ),
 );

Example:

void _onCountryChange(CountryCode countryCode) {
    //TODO : manipulate the selected country code here
    print("New Country selected: " + countryCode.toString());
  }

i18n

Just add the CountryLocalizations.delegate in the list of your app delegates

 return new MaterialApp(
      supportedLocales: [
         Locale("af"),
        Locale("am"),
        Locale("ar"),
        Locale("az"),
        Locale("be"),
        Locale("bg"),
        Locale("bn"),
        Locale("bs"),
        Locale("ca"),
        Locale("cs"),
        Locale("da"),
        Locale("de"),
        Locale("el"),
        Locale("en"),
        Locale("es"),
        Locale("et"),
        Locale("fa"),
        Locale("fi"),
        Locale("fr"),
        Locale("gl"),
        Locale("ha"),
        Locale("he"),
        Locale("hi"),
        Locale("hr"),
        Locale("hu"),
        Locale("hy"),
        Locale("id"),
        Locale("is"),
        Locale("it"),
        Locale("ja"),
        Locale("ka"),
        Locale("kk"),
        Locale("km"),
        Locale("ko"),
        Locale("ku"),
        Locale("ky"),
        Locale("lt"),
        Locale("lv"),
        Locale("mk"),
        Locale("ml"),
        Locale("mn"),
        Locale("ms"),
        Locale("nb"),
        Locale("nl"),
        Locale("nn"),
        Locale("no"),
        Locale("pl"),
        Locale("ps"),
        Locale("pt"),
        Locale("ro"),
        Locale("ru"),
        Locale("sd"),
        Locale("sk"),
        Locale("sl"),
        Locale("so"),
        Locale("sq"),
        Locale("sr"),
        Locale("sv"),
        Locale("ta"),
        Locale("tg"),
        Locale("th"),
        Locale("tk"),
        Locale("tr"),
        Locale("tt"),
        Locale("uk"),
        Locale("ug"),
        Locale("ur"),
        Locale("uz"),
        Locale("vi"),
        Locale("zh")
      ],
      localizationsDelegates: [
        CountryLocalizations.delegate,
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
      ],

Customization

Here is a list of properties available to customize your widget:

Name Type Description
onChanged ValueChanged callback invoked when the selection changes
onInit ValueChanged callback invoked during initialization of the widget
initialSelection String used to set the initial selected value
favorite List used to populate the favorite country list
textStyle TextStyle TextStyle applied to the widget button
padding EdgeInsetsGeometry the padding applied to the button
showCountryOnly bool true if you want to see only the countries in the selection dialog
searchDecoration InputDecoration decoration applied to the TextField search widget
searchStyle TextStyle style applied to the TextField search widget text
emptySearchBuilder WidgetBuilder use this to customize the widget used when the search returns 0 elements
builder Function(CountryCode) use this to build a custom widget instead of the default FlatButton
enabled bool set to false to disable the widget
textOverflow TextOverflow the button text overflow behaviour
dialogSize Size the size of the selection dialog
countryFilter List uses a list of strings to filter a sublist of countries
showOnlyCountryWhenClosed bool if true it'll show only the country
alignLeft bool aligns the flag and the Text to the left
showFlag bool shows the flag everywhere
showFlagMain bool shows the flag only when closed
showFlagDialog bool shows the flag only in dialog
flagWidth double the width of the flags
flagDecoration Decoration used for styling the flags
comparator Comparator use this to sort the countries in the selection dialog
hideSearch bool if true the search feature will be disabled

Contributions

Contributions of any kind are more than welcome! Feel free to fork and improve country_code_picker in any way you want, make a pull request, or open an issue.

Getting involved

First of all, thank you for even considering to get involved. You are a real super ⭐ and we ❤️ you!

Reporting bugs and issues

Use the configured Github issue report template when reporting an issue. Make sure to state your observations and expectations as objectively and informative as possible so that we can understand your need and be able to troubleshoot.

Discussions and ideas

We're happy to discuss and talk about ideas, post your question to StackOverflow.

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Chandra Abdul Fattah
Chandra Abdul Fattah

🚇 💻
Salvatore Giordano
Salvatore Giordano

🚇 💻

This project follows the all-contributors specification. Contributions of any kind welcome!

countrycodepicker's People

Contributors

abc873693 avatar abdullah-khudher avatar afulton11 avatar alfredo-handcash avatar allcontributors[bot] avatar chandrabezzo avatar el-etreby avatar ewertonrp avatar gsi-yoancme avatar hazemsalah avatar illia-romanenko avatar imtoori avatar jerryokafor avatar juanmartin8a avatar kechankrisna avatar lbloder avatar lefebvreilyas avatar linguitang avatar lordvidex avatar matteobertino avatar rudys-oshin avatar saifallak avatar sherifhasan avatar stwonary avatar themobilecoder avatar vemarav avatar victoreronmosele avatar vlfr1997 avatar yetitechnepal avatar ztoky avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

countrycodepicker's Issues

enabled dialog

enabled property not working if you used the builder method
Screenshot 2023-09-13 153425

Dark and Light Theme?

Please support Dark and Light Theme

Currently, I am using
dialogBackgroundColor:

which works so far by manually change the background based on theme.

Thank you!

Flags of same country codes mismatch

Steps to reproduce:

  1. Open the country codes modal
  2. Search United States
  3. Tap United States
  4. It should show the Canada flag to the first time you tap it
  5. Repeat step 1 to 3 again and it should show the United States flag

Getting a list when trying to translate a country name

This works as expected

void getEnglishCountryName(String countryCode) async {
  final localizations = CountryLocalizations(Locale('en'));
  await localizations.load();
  String? countryName = localizations.translate(countryCode);
  print(countryName);  // This should print "Sweden" for "SE"
}

// Using the function
getEnglishCountryName('SE');

But getEnglishCountryName('US') prints "[United States of America, USA]" instead of a single human-readable name, perhaps due to toString() being used here:

return MapEntry(key, value.toString());

Way to customise colors

In these days most app use dark theme or some custome theme, Please make this compatible to more customise to developer

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.