I am using flutter 1.17.3 and

  country_code_picker: ^1.4.0

@imtoori I am on a tight deadline for a project, so a quick response would be appreciated.

When I run this code

    import 'package:country_code_picker/country_code_picker.dart';
    import 'package:flutter/material.dart';
    
    void main() {
      runApp(App());
    }
    
    class App extends StatelessWidget {
      App();
    
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          debugShowCheckedModeBanner: false,
          home: TestWidget(),
        );
      }
    }
    
    class TestWidget extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return _buildCountryPicker(context);
      }
    
        Widget _buildCountryPicker(BuildContext context) {
    
        return Container(
          width: MediaQuery.of(context).size.width,
          height: MediaQuery.of(context).size.height,
          child: Center(
            child: CountryCodePicker(
              initialSelection: 'NL',
            ),
          ),
        );
      }
    }

And I open the dialog to select a country. I scroll in the list and then select the TextField my keyboard opens and when I try to type something my entire app freezes. I can't even hot reload. I forked the repo and tried to fix it, except for that I don't have a singly clue what it could be.

I am running this on my Huawei P30, but I also experience this on other android devices. I don't know if this is a flutter bug or a country code picker bug.

I think it is probably in this widget somewhere.

class SelectionDialog extends StatefulWidget {
      final List<CountryCode> elements;
      final bool showCountryOnly;
      final InputDecoration searchDecoration;
      final TextStyle searchStyle;
      final TextStyle textStyle;
      final WidgetBuilder emptySearchBuilder;
      final bool showFlag;
      final double flagWidth;
      final Size size;
      final bool hideSearch;
    
      /// elements passed as favorite
      final List<CountryCode> favoriteElements;
    
      SelectionDialog(
        this.elements,
        this.favoriteElements, {
        Key key,
        this.showCountryOnly,
        this.emptySearchBuilder,
        InputDecoration searchDecoration = const InputDecoration(),
        this.searchStyle,
        this.textStyle,
        this.showFlag,
        this.flagWidth = 32,
        this.size,
        this.hideSearch = false,
      })  : assert(searchDecoration != null, 'searchDecoration must not be null!'),
            this.searchDecoration =
                searchDecoration.copyWith(prefixIcon: Icon(Icons.search)),
            super(key: key);
    
      @override
      State<StatefulWidget> createState() => _SelectionDialogState();
    }
    
    class _SelectionDialogState extends State<SelectionDialog> {
      /// this is useful for filtering purpose
      List<CountryCode> filteredElements;
    
      @override
      Widget build(BuildContext context) => SimpleDialog(
            titlePadding: const EdgeInsets.all(0),
            title: Column(
              mainAxisSize: MainAxisSize.min,
              crossAxisAlignment: CrossAxisAlignment.end,
              children: <Widget>[
                IconButton(
                  padding: const EdgeInsets.all(0),
                  iconSize: 20,
                  icon: Icon(
                    Icons.close,
                  ),
                  onPressed: () => Navigator.pop(context),
                ),
                if (!widget.hideSearch)
                  Padding(
                    padding: const EdgeInsets.symmetric(horizontal: 24),
                    child: TextField(
                      style: widget.searchStyle,
                      decoration: widget.searchDecoration,
                      onChanged: _filterElements,
                    ),
                  ),
              ],
            ),
            children: [
              Container(
                width: widget.size?.width ?? MediaQuery.of(context).size.width,
                height:
                    widget.size?.height ?? MediaQuery.of(context).size.height * 0.7,
                child: ListView(
                  children: [
                    widget.favoriteElements.isEmpty
                        ? const DecoratedBox(decoration: BoxDecoration())
                        : Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              ...widget.favoriteElements.map(
                                (f) => SimpleDialogOption(
                                  child: _buildOption(f),
                                  onPressed: () {
                                    _selectItem(f);
                                  },
                                ),
                              ),
                              const Divider(),
                            ],
                          ),
                    if (filteredElements.isEmpty)
                      _buildEmptySearchWidget(context)
                    else
                      ...filteredElements.map(
                        (e) => SimpleDialogOption(
                          key: Key(e.toLongString()),
                          child: _buildOption(e),
                          onPressed: () {
                            _selectItem(e);
                          },
                        ),
                      ),
                  ],
                ),
              ),
            ],
          );
    
      Widget _buildOption(CountryCode e) {
        return Container(
          width: 400,
          child: Flex(
            direction: Axis.horizontal,
            children: <Widget>[
              if (widget.showFlag)
                Flexible(
                  child: Padding(
                    padding: const EdgeInsets.only(right: 16.0),
                    child: Image.asset(
                      e.flagUri,
                      package: 'country_code_picker',
                      width: widget.flagWidth,
                    ),
                  ),
                ),
              Expanded(
                flex: 4,
                child: Text(
                  widget.showCountryOnly
                      ? e.toCountryStringOnly()
                      : e.toLongString(),
                  overflow: TextOverflow.fade,
                  style: widget.textStyle,
                ),
              ),
            ],
          ),
        );
      }
    
      Widget _buildEmptySearchWidget(BuildContext context) {
        if (widget.emptySearchBuilder != null) {
          return widget.emptySearchBuilder(context);
        }
    
        return Center(
          child: Text('No country found'),
        );
      }
    
      @override
      void initState() {
        filteredElements = widget.elements;
        super.initState();
      }
    
      void _filterElements(String s) {
        s = s.toUpperCase();
        setState(() {
          filteredElements = widget.elements
              .where((e) =>
                  e.code.contains(s) ||
                  e.dialCode.contains(s) ||
                  e.name.toUpperCase().contains(s))
              .toList();
        });
      }
    
      void _selectItem(CountryCode e) {
        Navigator.pop(context, e);
      }
    }

There is no arguments to pass in the settings of FlatButton such as shape, border and elevation.

In addition, even if you use builder, the widget returned from the builder function is automatically wrapped with InkWell, preventing you from customising the handling of tap events.

I actually managed to make the ripple effect invisible by making splashColor and highlightColor transparent and wrap InkWell with another button, in an attempt to handle tap events on my own. It achieved my desired look but with no more luck because there is no way of manually showing the picker dialog, as mentioned in #60.

This commit is for letting the user search / filter a country in the dialog using the selected locale.

Fixes #62 and Fixes #48

I added a flag in the constructor so that a user can still search using the original name in the country_codes json file.

I too have the problem that some icons are not shown (some others are). This was on Android 5.1, I guess that the device I have (Lenovo Vibe K5) is not supporting some fonts.

Maybe there is the chance to combine this package with this one? https://pub.dartlang.org/packages/country_icons

To Reproduce: 1> open country dialogue 2> Type "us" into search fields 3> Then Select the USA from list..

after this steps you will get "Canada" as a selected country, for the first time after initialising country picker. can you please guide me ?

builder: (CountryCode) { return Row( mainAxisAlignment: MainAxisAlignment.center, children: [ Text(CountryCode.code), Image.asset(CountryCode.flagUri), Icon(Icons.arrow_drop_down) ]); },

flutter: Another exception was thrown: Unable to load asset: flags/jo.png

Is there an option to format and style the dialog widget where the country and country code is selected? Currently, mine displays as blank, and I could really use some tips pointing me on how to go about it.

This is an image of what I have -

Hi,

Can you please adapt your code?

1. Can we have the option to remove the bold text when we show Flag+Country Name or whatever?

2. Flags size are different;

3. Can we have the option to change the padding? The actual option don't work;

4. When I have Flag+Country Name and something else on the left size (like icon or whatever), the countries with big name get overflow/error. Can they please go Flexible/Multiple lines?

All the above should be easy. THANK YOU for this awesome lib.

I'm using the latest version and on flutter stable channel

the arabic language is not showing on the dialog properly like showing on the picture

this is on the iOS version

don't know if it is the same for Android

like you can see it's displaying the characters separated

UAE -> should be "دولة اللإمارت العربية المتحدة" not " د و ل ة ا ل ا ل إ م ا ر ا ت ا ل ع ر ب ي ة ا ل م ت ح د ة" YMEN -> should be "اليمن" not "ا ل ي م ن" and same goes for all the arabic countries

also it is not working on typing too!

one more issues that I found that it make my hole arabic langue messed up after selecting an arabic country

These countries are presented in view. but aren't accessible via CountryManager(); +672 Antarctica +47 Bouvet Island +262 French Southern Territories +0 Heard Island and Macdonald Islands +599 Netherlands Antilles +64 Pitcairn +500 South Georgia and the South Sandwich Islands

For example +672 Antarctica: onChanged callback returns country code 'AQ' then calling CountryManager().countries.firstWhere((element) => element.countryCode == 'AQ', orElse: () => null) returns null

the same goes for another countries in the list above.

On Flutter web, when I open the country picker, the text and search bar are blank:

Here's my TextFormField definition:

TextFormField(
    controller: _phoneController,
    keyboardType: TextInputType.phone,
    decoration: InputDecoration(
        hintText: 'Enter your phone number',
        labelText: 'Phone',
        prefixIcon: CountryCodePicker(
        onChanged: (CountryCode code) {
            _countryCode = code.dialCode;
        },
        initialSelection: '+1',
        favorite: ['+1', 'US'],
    ),
)

Last commit was 13 months ago and pr's are going back to mid '21 without any reactions from @imtoori

Seems like the repo is dead. Does anybody already maintain an active fork?

It's currently not possible to exclude countries. The filter is meant to keep only the specified countries. This instead will remove the specified countries from the full list.

I have an issue regarding this package is that , If country code is same for more than 2 countries (For ex :- US and Canada), then country flag is change automatically after I update my profile screen. If I select my country code +1 with USA it display well at first time with proper USA flag , but after it if I enter my profile screen again then I get country code +1 with Canada flag even if I don't change it from USA to Canada.

Please provide me better solution regarding above issue :)

In some cases the delegates produces some ugly side effects.

In my app we have a PageView and each page comes from another flutter module. To show the String resources from the correct module a localization override is needed in the page. While scrolling the page in the PageView the page is flickering in the moment the next page is arriving the screen.

Workaround: To fix that problem we removed the CountryLocalizations.delegate from the MaterialApp widget and wrap the CountryCodePicker into a Localizations.override widget with a Builder as child.