Flutter国家选择器插件advance_country_picker的使用

Flutter国家选择器插件advance_country_picker的使用

advance_country_picker 是一个用于 Flutter 应用的国家选择器插件。它提供了可定制的国家选择器小部件，并支持通过对话框和底部弹出窗口选择国家。该插件还包括电话号码输入功能，可以解析和验证带国家代码的电话号码。

功能

• 可定制的国家选择器小部件
• 可定制的电话号码输入字段
• 可定制的对话框和底部弹出窗口
• 显示国家旗帜
• 获取国家列表
• 提供方法以编程方式获取和设置电话号码和国家
• 按照国家代码获取国家
• 按照国家名称获取国家
• 按照拨号代码获取国家
• 按照国籍获取国家
• 解析带国家代码的电话号码
• 电话号码格式化
• 验证：基于类型（移动、固定电话、VoIP）进行验证
• 格式化：为特定国家格式化电话号码
• 电话号码范围：在电话号码范围内查找所有电话号码
• 在文本中查找电话号码
• 支持东方阿拉伯数字
• 使用来自Google的libPhoneNumber项目的最佳元数据

安装

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

dependencies:
  advance_country_picker: ^1.0.0

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

使用

国家选择器小部件

你可以使用 AdvanceCountryPickerWidget 来显示一个带有搜索功能的国家列表：

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Advance Country Picker Example'),
        ),
        body: Center(
          child: AdvanceCountryPickerWidget(
            onSelected: (Country? country) {
              // 处理国家选择
              print('Selected country: ${country?.name}');
            },
          ),
        ),
      ),
    );
  }
}

带国家代码的电话号码输入

PhoneNumberInput 小部件允许用户输入电话号码并自定义国家代码选择器。你可以通过编程方式获取输入的电话号码并设置国家和电话号码：

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Phone Number Input Example'),
        ),
        body: Center(
          child: PhoneNumberInput(
            onPhoneNumberChanged: (phoneNumber, country) {
              // 处理电话号码更改
              print('Phone number: $phoneNumber, Country: ${country?.name}');
            },
          ),
        ),
      ),
    );
  }
}

编程获取和设置电话号码

你也可以通过编程方式获取输入的电话号码，并设置国家和电话号码：

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

class MyAppState extends State<MyApp> {
  final PhoneNumberInput _phoneNumberInput = PhoneNumberInput();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Phone Number Input Example'),
        ),
        body: Column(
          children: [
            _phoneNumberInput,
            ElevatedButton(
              onPressed: () {
                // 获取输入的电话号码
                String phoneNumber = _phoneNumberInput.phoneNumber;
                print('Phone number: $phoneNumber');
              },
              child: Text('Get Phone Number'),
            ),
            ElevatedButton(
              onPressed: () {
                // 程序化设置国家和电话号码
                _phoneNumberInput.setCountryAndPhoneNumber(
                  Country(name: 'United States', countryCode: 'US', dialCode: '+1', flag: 'assets/flags/us.png'),
                  '1234567890',
                );
              },
              child: Text('Set Country and Phone Number'),
            ),
          ],
        ),
      ),
    );
  }
}

解析电话号码

advance_country_picker 包还包含来自 phone_numbers_parser 包的功能，用于解析和验证电话号码：

import 'package:advance_country_picker/phone_numbers_parser.dart';

void main() {
  PhoneNumberParser parser = PhoneNumberParser();
  PhoneNumber phoneNumber = parser.parse('+14155552671');

  print('Country: ${phoneNumber.country}');
  print('National Number: ${phoneNumber.nationalNumber}');
}