Flutterで国番号選択UIを簡単実装できるパッケージ country_code_picker

電話番号認証を実装する際、

日本なら「+81」
アメリカなら「+1」
イギリスなら「+44」

といった国番号（Country Code）の選択UIが必要になるケースがあります。

しかし、世界中の国情報や国旗、検索機能を自前で実装するのは意外と大変です。

そんな時に便利なのが今回紹介する country_code_picker パッケージです。

この記事では、Flutterで国番号選択機能を簡単に実装できる「country_code_picker」の使い方や特徴を解説します。

country_code_pickerとは？

country_code_pickerは、Flutter向けの国番号選択ウィジェットです。

主な特徴は以下の通りです。

国旗付きの国番号選択UI
国名検索機能
お気に入り国の表示
70以上の言語に対応した国際化（i18n）
Android / iOS / Web / Desktop対応

電話番号認証画面やユーザー登録フォームでよく利用されるパッケージです。

インストール

まずは pubspec.yaml に追加します。

dependencies:
  country_code_picker: ^3.4.1

その後、

flutter pub get

を実行します。

基本的な使い方

もっともシンプルな実装例はこちらです。

import 'package:country_code_picker/country_code_picker.dart';

CountryCodePicker(
  onChanged: (country) {
    print(country.dialCode);
  },
  initialSelection: 'JP',
)

実行すると、

🇯🇵 日本 (+81)
🇺🇸 アメリカ (+1)
🇬🇧 イギリス (+44)

などの一覧が表示され、選択された国番号を取得できます。

選択変更を取得する

国が変更されたタイミングで処理を行うには onChanged を利用します。

CountryCodePicker(
  onChanged: (CountryCode countryCode) {
    print(
      'Country: ${countryCode.name}'
    );

    print(
      'Dial Code: ${countryCode.dialCode}'
    );
  },
)

取得できる主な情報

countryCode.code
countryCode.name
countryCode.dialCode

例

JP
Japan
+81

となります。

初期選択を指定する

日本向けアプリであれば、最初から日本を選択状態にしておくことも可能です。

CountryCodePicker(
  initialSelection: 'JP',
)

国コードだけでなく、

initialSelection: '+81'

のように電話番号形式でも指定できます。

お気に入り国を上部に表示

よく利用する国を先頭に固定表示できます。

CountryCodePicker(
  favorite: [
    '+81',
    'US',
    'GB',
  ],
)

例えば、

日本
アメリカ
イギリス
-------------
その他の国

のような表示になります。

国名検索機能

country_code_pickerには検索機能が標準搭載されています。

ユーザーは

Japan
United States
France

などを入力して素早く国を検索できます。

検索機能を無効化したい場合は、

CountryCodePicker(
  hideSearch: true,
)

を指定します。

特定の国だけ表示する

対象国を限定したい場合は countryFilter を利用します。

CountryCodePicker(
  countryFilter: [
    'JP',
    'US',
    'KR',
  ],
)

これにより、

日本
アメリカ
韓国

のみ表示されます。

国旗表示をカスタマイズ

国旗表示のON/OFFも可能です。

CountryCodePicker(
  showFlag: true,
)

ダイアログだけ非表示にする場合

CountryCodePicker(
  showFlagDialog: false,
)

ボタン部分だけ非表示にする場合

CountryCodePicker(
  showFlagMain: false,
)

など細かく制御できます。

Localization（多言語対応）

このパッケージは70以上の言語に対応しています。

利用する場合は CountryLocalizations.delegate を追加します。

MaterialApp(
  localizationsDelegates: [
    CountryLocalizations.delegate,
    GlobalMaterialLocalizations.delegate,
    GlobalWidgetsLocalizations.delegate,
  ],
)

日本語環境では国名も日本語表示になります。

Firebase Authenticationとの組み合わせ

もっとも多い利用シーンは電話番号認証です。

Row(
  children: [
    CountryCodePicker(
      initialSelection: 'JP',
      onChanged: (country) {
        selectedCode =
            country.dialCode!;
      },
    ),

    Expanded(
      child: TextField(
        controller: phoneController,
      ),
    ),
  ],
)

送信時

final phoneNumber =
    '$selectedCode${phoneController.text}';

await FirebaseAuth.instance
    .verifyPhoneNumber(
      phoneNumber: phoneNumber,
    );

これだけで国際電話形式の番号を生成できます。

メリット

実装が非常に簡単

数行で国番号選択UIを導入できます。

国際化対応済み

70以上の言語に対応しているためグローバルアプリ向きです。

検索機能付き

利用者が200以上の国から探しやすくなります。

カスタマイズ性が高い

国旗表示や検索UIなどを柔軟に変更できます。

注意点

UIはややクラシック

最近のFlutterパッケージと比較すると、Material 3に最適化されたデザインではありません。

モダンなBottomSheet型UIが欲しい場合は、

country_picker
world_code_picker

なども候補になります。

電話番号バリデーション機能はない

このパッケージは国番号選択専用です。

電話番号の形式チェックまで行いたい場合は、

libphonenumber系パッケージ
intl_phone_number_input

などとの組み合わせがおすすめです。

まとめ

country_code_pickerは、Flutterで国番号選択UIを実装する際の定番パッケージです。

特に、

Firebase Authentication
SMS認証
国際向けサービス
ユーザー登録フォーム

との相性が非常に良く、数分で実装できます。

国旗表示や検索機能、多言語対応も標準搭載されているため、グローバル展開を視野に入れたFlutterアプリでは非常に便利なパッケージと言えるでしょう。

参考URL：