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

简介

fl_country_code_picker 是一个Flutter插件，用于显示包含国家拨号代码的模态框。用户可以在模态框中搜索并选择所需的国家代码。此外，它还具有自动滚动到当前设备区域设置的功能，并支持本地化。

数据来源：参考文献

示例

完整示例Demo

下面是一个完整的示例，展示了如何在Flutter项目中使用fl_country_code_picker插件。

1. 添加依赖

首先，在pubspec.yaml文件中添加fl_country_code_picker依赖：

dependencies:
  flutter:
    sdk: flutter
  fl_country_code_picker: ^最新版本号

2. 配置MaterialApp

确保在MaterialApp中添加本地化支持：

import 'package:flutter/material.dart';
import 'package:fl_country_code_picker/fl_country_code_picker.dart' as flc;

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      supportedLocales: flc.CountryLocalizations.supportedLocales.map((locale) => Locale(locale.languageCode, locale.countryCode)),
      localizationsDelegates: const [
        flc.CountryLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalMaterialLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
      ],
      home: HomeScreen(),
    );
  }
}

3. 创建国家代码选择器

接下来，创建一个按钮来触发国家代码选择器的显示，并处理选择后的逻辑：

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

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  final countryPicker = FlCountryCodePicker();

  CountryCode? selectedCountry;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('国家代码选择器'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            GestureDetector(
              onTap: () async {
                // 显示国家代码选择器
                final code = await countryPicker.showPicker(context: context);
                setState(() {
                  selectedCountry = code;
                });
              },
              child: Container(
                padding: EdgeInsets.symmetric(horizontal: 8.0, vertical: 4.0),
                margin: EdgeInsets.symmetric(horizontal: 8.0),
                decoration: BoxDecoration(
                  color: Colors.blue,
                  borderRadius: BorderRadius.all(Radius.circular(5.0)),
                ),
                child: Text(
                  '选择国家代码',
                  style: TextStyle(color: Colors.white),
                ),
              ),
            ),
            SizedBox(height: 20),
            if (selectedCountry != null)
              ListTile(
                leading: selectedCountry!.flagImage,
                title: Text(selectedCountry!.name),
                subtitle: Text('+${selectedCountry!.dialCode}'),
              )
          ],
        ),
      ),
    );
  }
}

自定义参数

你可以通过传递一些可选参数来自定义选择器的外观和行为：

final countryPickerWithParams = FlCountryCodePicker(
  localize: true,
  showDialCode: true,
  showSearchBar: true,
  favorites: ['US', 'PH', 'AU'],
  title: Padding(
    padding: EdgeInsets.all(16),
    child: Text(
      '选择国家',
      style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
    ),
  ),
  searchBarDecoration: InputDecoration(
    labelText: '搜索国家',
    border: OutlineInputBorder(),
  ),
  countryTextStyle: TextStyle(fontSize: 18),
  dialCodeTextStyle: TextStyle(fontSize: 16, color: Colors.grey),
);

使用方法

• 显示选择器：通过调用countryPicker.showPicker(context: context)方法来显示选择器。
• 获取选择结果：选择器返回一个CountryCode对象，可以通过其属性（如name、code、dialCode等）获取所选国家的信息。

FAQ

• 如何在Image widget中使用国家代码的旗帜图片？

  Image.asset(
    fit: fit,
    width: width,
    countryCode.flagUri,
    alignment: alignment,
    package: countryCode.flagImagePackage,
  );
  

• 如何更改模态框的标题？ 创建自定义标题Widget，然后将其传递给FlCountryCodePicker的title参数：

  const Widget title = Padding(
    padding: EdgeInsets.all(16),
    child: Text(
      '我的标题',
      style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
    ),
  );
  
  countryPicker = const FlCountryCodePicker(title: title);
  

参考文献

• ISO 639-1代码列表
• 国家代码
• 国际呼叫前缀
• 移动电话前缀列表

希望这些信息能帮助你更好地理解和使用fl_country_code_picker插件！如果有任何问题或需要进一步的帮助，请随时提出。