Flutter国家代码选择器插件 country_code_picker_x 的使用

country_code_picker_x 是一个用于在 Flutter 应用中显示国家代码选择器的插件。它支持70种语言的国际化（i18n），并且提供了丰富的自定义选项。

主要功能

• 显示国家代码选择器。
• 支持多种语言的国际化。
• 提供多种自定义选项，如初始选择、收藏列表、样式等。

安装

在 pubspec.yaml 文件中添加依赖：

dependencies:
  country_code_picker_x: ^latest_version

然后运行 flutter pub get 来安装该插件。

基本用法

示例代码

以下是一个基本的示例，展示了如何在应用中使用 CountryCodePickerX 组件，并设置回调函数来处理选择变化。

import 'package:country_code_picker_x/country_code_picker_x.dart';
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Country Code Picker Example'),
        ),
        body: Center(
          child: CountryCodePickerX(
            onChanged: (CountryCode countryCode) {
              print("New Country selected: " + countryCode.toString());
            },
            initialSelection: 'IT', // 初始选择可以是国家代码或拨号代码
            favorite: ['+39', 'FR'], // 收藏列表
            showCountryOnly: false, // 是否仅显示国家名称和国旗
            showOnlyCountryWhenClosed: false, // 关闭时是否仅显示国家名称和国旗
            alignLeft: false, // 标志和文本是否左对齐
          ),
        ),
      ),
    );
  }
}

回调函数

你可以通过 onChanged 回调函数来获取用户选择的国家代码：

void _onCountryChange(CountryCode countryCode) {
  // 处理选择的国家代码
  print("New Country selected: " + countryCode.toString());
}

国际化（i18n）

为了支持多语言，你需要在 MaterialApp 中添加 CountryLocalizations.delegate 和其他必要的本地化委托：

return 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,
  ],
  home: Scaffold(
    appBar: AppBar(
      title: const Text('CountryPicker Example'),
    ),
    body: Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          CountryCodePickerX(
            onChanged: print,
            initialSelection: 'IT',
            favorite: ['+39', 'FR'],
            countryFilter: ['IT', 'FR'],
            showFlagDialog: false,
            comparator: (a, b) => b.name!.compareTo(a.name!),
            onInit: (code) => print("on init ${code!.name} ${code.dialCode} ${code.name}"),
          ),
          // 其他示例组件...
        ],
      ),
    ),
  ),
);

自定义选项

CountryCodePickerX 提供了多个属性用于自定义其外观和行为。以下是一些常用的属性：

更多示例

以下是一些更复杂的示例，展示了如何进一步自定义 CountryCodePickerX 组件：

SizedBox(
  width: 400,
  height: 60,
  child: CountryCodePickerX(
    onChanged: print,
    hideMainText: true,
    showFlagMain: true,
    showFlag: false,
    initialSelection: 'TF',
    hideSearch: true,
    showCountryOnly: true,
    showOnlyCountryWhenClosed: true,
    alignLeft: true,
  ),
),

SizedBox(
  width: 400,
  height: 60,
  child: CountryCodePickerX(
    onChanged: (e) => print(e.toLongString()),
    initialSelection: 'TF',
    showCountryOnly: true,
    showOnlyCountryWhenClosed: true,
    favorite: ['+39', 'FR'],
  ),
),

SizedBox(
  width: 100,
  height: 60,
  child: CountryCodePickerX(
    enabled: false,
    onChanged: (c) => c.name,
    initialSelection: 'TF',
    showCountryOnly: true,
    showOnlyCountryWhenClosed: true,
    favorite: ['+39', 'FR'],
  ),
)