Flutter国际电话号码选择插件smart_country_code_picker的使用

smart_country_code_picker 是一个用于在 Flutter 应用程序中显示国家代码选择器的插件。它支持多达 70 种语言的国际化（i18n）。

插件smart_country_code_picker使用方法

只需将组件添加到您的应用程序中，并设置 onChanged 回调即可。

示例代码

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('智能国家代码选择器示例'),
        ),
        body: Center(
          child: SmartCountryCodePicker(
            onChanged: (value) {
              print("新选择的国家代码: $value");
            },
            // 初始选择的国家代码或拨号代码
            initialSelection: 'US',
            favorite: ['+1', 'CA'], // 喜爱的国家列表
            // 只显示国家名称和旗帜
            showCountryOnly: false,
            // 关闭时只显示国家名称和旗帜
            showOnlyCountryWhenClosed: false,
            // 对齐标志和文本到左侧
            alignLeft: false,
          ),
        ),
      ),
    );
  }
}

示例解释

• onChanged: 当用户选择不同的国家代码时触发的回调函数。
• initialSelection: 设置初始选中的国家代码或拨号代码。
• favorite: 设置喜爱的国家列表，这些国家会优先显示。
• showCountryOnly: 如果为 true，则仅显示国家名称和旗帜。
• showOnlyCountryWhenClosed: 如果为 true，则在关闭弹窗时仅显示国家名称和旗帜。
• alignLeft: 如果为 true，则对齐标志和文本到左侧。

国际化（i18n）

要启用插件的多语言支持，只需在应用的 localizationsDelegates 中添加 CountryPickerLocalizations.delegate。

示例代码

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    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: [
        CountryPickerLocalizations.delegate,
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
      ],
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('智能国家代码选择器多语言示例'),
      ),
      body: Center(
        child: SmartCountryCodePicker(
          onChanged: (value) {
            print("新选择的国家代码: $value");
          },
          initialSelection: 'US',
          favorite: ['+1', 'CA'],
          showCountryOnly: false,
          showOnlyCountryWhenClosed: false,
          alignLeft: false,
        ),
      ),
    );
  }
}