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

插件简介

country_code_picker 是一个用于显示国家代码选择器的Flutter插件，它支持70种语言的国际化。您可以通过访问 在线示例 来查看其效果。

使用方法

基本用法

只需将 CountryCodePicker 组件放入您的应用程序中，并设置 onChanged 回调函数即可。以下是一个简单的例子：

import 'package:country_code_picker/country_code_picker.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 Picker Example'),
        ),
        body: Center(
          child: CountryCodePicker(
            onChanged: (code) {
              print("New Country selected: " + code.toString());
            },
            // 初始选择和收藏可以是国家代码 ('IT') 或区号('+39')
            initialSelection: 'IT',
            favorite: ['+39', 'FR'],
            // 可选。仅显示国家名称和国旗
            showCountryOnly: false,
            // 可选。当弹出框关闭时仅显示国家名称和国旗
            showOnlyCountryWhenClosed: false,
            // 可选。对齐国旗和文本到左侧
            alignLeft: false,
          ),
        ),
      ),
    );
  }
}

i18n支持

为了启用多语言支持，您需要在应用中添加 CountryLocalizations.delegate：

return MaterialApp(
  supportedLocales: [
    Locale("af"),
    Locale("am"),
    Locale("ar"),
    // ... 添加其他语言
  ],
  localizationsDelegates: [
    CountryLocalizations.delegate,
    GlobalMaterialLocalizations.delegate,
    GlobalWidgetsLocalizations.delegate,
  ],
  // ... 其他配置
);

自定义选项

以下是您可以自定义的一些属性：

示例代码

以下是一个完整的示例代码，展示了如何使用 country_code_picker 插件：

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

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

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  MyAppState createState() => MyAppState();
}

class MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      supportedLocales: const [
        Locale("af"),
        Locale("am"),
        Locale("ar"),
        // ... 添加其他语言
      ],
      localizationsDelegates: const [
        CountryLocalizations.delegate,
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
      ],
      home: Scaffold(
        appBar: AppBar(
          title: const Text('CountryPicker Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              CountryCodePicker(
                onChanged: print,
                initialSelection: 'IT',
                favorite: const ['+39', 'FR'],
                countryFilter: const ['IT', 'FR'],
                showFlagDialog: false,
                margin: const EdgeInsets.symmetric(horizontal: 6),
                comparator: (a, b) => b.name!.compareTo(a.name!),
                onInit: (code) => debugPrint(
                    "on init ${code?.name} ${code?.dialCode} ${code?.name}"),
              ),
              CountryCodePicker(
                onChanged: print,
                initialSelection: 'IT',
                favorite: const ['+39', 'FR'],
                countryFilter: const ['IT', 'FR'],
                flagDecoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(7),
                ),
              ),
              const 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: (element) => debugPrint(element.toLongString()),
                  initialSelection: 'TF',
                  showCountryOnly: true,
                  showOnlyCountryWhenClosed: true,
                  favorite: const ['+39', 'FR'],
                ),
              ),
              SizedBox(
                width: 100,
                height: 60,
                child: CountryCodePicker(
                  enabled: false,
                  onChanged: (c) => c.name,
                  initialSelection: 'TF',
                  showCountryOnly: true,
                  showOnlyCountryWhenClosed: true,
                  favorite: const ['+39', 'FR'],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

通过上述代码，您可以创建一个包含多个国家代码选择器的应用程序，并根据需要进行自定义。希望这能帮助您更好地理解和使用 country_code_picker 插件！