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

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

标题

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

内容

• Pub链接: https://pub.dev/packages/country_picker_flutter

• 插件描述: 该插件用于显示国家代码选择器。它支持70种语言的国际化。

• 示例图片:

  • 
  • 

• 使用说明:

  • 只需将组件放入应用程序中，并设置onChanged回调。

import 'package:country_code_picker_mp/country_code_picker.dart';
import 'package:flutter/material.dart';

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Center(
      child: CountryCodePicker(
        onChanged: print,
        // 初始选择和喜爱列表可以是代码（'IT'）或拨号码（'+39'）
        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}"
        ),
      ),
    ),
  );
}

• 示例:

void _onCountryChange(CountryCode countryCode) {
  // TODO : 操作所选国家代码
  log("New Country selected: " + countryCode.toString());
}

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => new _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('CountryPicker Example'),
        ),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            CountryCodePicker(
              onChanged: print,
              // 初始选择和 喜爱列表可以是代码（'IT'）或拨号码（'+39'）
              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}"
              ),
            ),
            CountryCodePicker(
              onChanged: print,
              // 初始选择和 喜爱列表可以是代码（'IT'）或拨号码（'+39'）
              initialSelection: 'IT',
              favorite: ['+39', 'FR'],
              countryFilter: ['IT', 'FR'],
              // 国旗可以使用 `Decoration` 的的 `borderRadius` 和 `shape` 字段进行样式化
              flagDecoration: BoxDecoration(
                borderRadius: BorderRadius.circular(7),
              ),
            ),
            SizedBox(
              width: 400,
              height: 60,
              child: CountryCodePicker(
                onChanged: print,
                hideMainText: true,
                showFlagMain: true,
                showFlag: false,
                initialSelection: 'TF',
                hideSearch: true,
                showCountryOnly: true,
                showOnlyCountryWhenClosed: true,
                alignLeft: true,
              ),
            ),
            SizedBox(
              width: 400,
              height: 60,
              child: CountryCodePicker(
                onChanged: ( e ) => print(e.toLongString()),
                initialSelection: 'TF',
                showCountryOnly: true,
                showOnlyCountryWhenClosed: true,
                favorite: ['+39', 'FR'],
              ),
            ),
            SizedBox(
              width: 100,
              height: 60,
              child: CountryCodePicker(
                enabled: false,
                onChanged: ( c ) => c.name,
                initialSelection: 'TF',
                showCountryOnly: true,
                showOnlyCountryWhenClosed: true,
                favorite: ['+39', 'FR'],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

• i18n:
  • 只需在应用的 delegates 列表中添加 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,
  ],
);