Flutter国际电话号码输入插件intl_phone_number_input_perci的使用

Flutter国际电话号码输入插件intl_phone_number_input_perci的使用

简介

intl_phone_number_input_perci 是一个用于在Flutter应用中输入和验证国际电话号码的插件。它是 natintosh/intl_phone_number_input 的分支版本，修复了iOS编译时缺少 PhoneNumberKit 类的问题。当前版本解决了iOS编译问题，并提供了更稳定的电话号码输入功能。

完整示例Demo

以下是一个完整的示例代码，展示了如何使用 intl_phone_number_input_perci 插件来创建一个包含国际电话号码输入功能的Flutter应用。

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    // 设置深色主题并指定主颜色为蓝色
    var darkTheme = ThemeData.dark().copyWith(primaryColor: Colors.blue);

    return MaterialApp(
      title: 'Demo',
      themeMode: ThemeMode.dark, // 使用深色模式
      darkTheme: darkTheme,
      theme: ThemeData(
        primarySwatch: Colors.blue, // 主题颜色
      ),
      home: Scaffold(
        appBar: AppBar(title: Text('Demo')), // 应用栏标题
        body: MyHomePage(), // 主页面内容
      ),
    );
  }
}

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

class _MyHomePageState extends State<MyHomePage> {
  final GlobalKey<FormState> formKey = GlobalKey<FormState>(); // 表单状态管理

  final TextEditingController controller = TextEditingController(); // 文本控制器
  String initialCountry = 'NG'; // 初始国家代码（尼日利亚）
  PhoneNumber number = PhoneNumber(isoCode: 'NG'); // 初始电话号码对象

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Form(
      key: formKey, // 绑定表单状态
      child: Container(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center, // 居中对齐
          children: <Widget>[
            // 国际电话号码输入框
            InternationalPhoneNumberInput(
              onInputChanged: (PhoneNumber number) {
                print(number.phoneNumber); // 打印输入的电话号码
              },
              onInputValidated: (bool value) {
                print(value); // 打印验证结果
              },
              selectorConfig: SelectorConfig(
                selectorType: PhoneInputSelectorType.BOTTOM_SHEET, // 选择器类型为底部弹出
                useBottomSheetSafeArea: true, // 使用安全区域
              ),
              ignoreBlank: false, // 不忽略空白输入
              autoValidateMode: AutovalidateMode.disabled, // 关闭自动验证
              selectorTextStyle: TextStyle(color: Colors.black), // 选择器文本样式
              initialValue: number, // 初始值
              textFieldController: controller, // 绑定文本控制器
              formatInput: true, // 格式化输入
              keyboardType: TextInputType.numberWithOptions(signed: true, decimal: true), // 键盘类型
              inputBorder: OutlineInputBorder(), // 输入框边框样式
              onSaved: (PhoneNumber number) {
                print('On Saved: $number'); // 保存时打印电话号码
              },
            ),
            // 验证按钮
            ElevatedButton(
              onPressed: () {
                formKey.currentState?.validate(); // 触发表单验证
              },
              child: Text('Validate'), // 按钮文本
            ),
            // 更新按钮
            ElevatedButton(
              onPressed: () {
                getPhoneNumber('+15417543010'); // 更新电话号码
              },
              child: Text('Update'), // 按钮文本
            ),
            // 保存按钮
            ElevatedButton(
              onPressed: () {
                formKey.currentState?.save(); // 保存表单数据
              },
              child: Text('Save'), // 按钮文本
            ),
          ],
        ),
      ),
    );
  }

  void getPhoneNumber(String phoneNumber) async {
    // 根据电话号码获取地区信息
    PhoneNumber number = await PhoneNumber.getRegionInfoFromPhoneNumber(phoneNumber, 'US');

    setState(() {
      this.number = number; // 更新电话号码对象
    });
  }

  [@override](/user/override)
  void dispose() {
    controller.dispose(); // 释放文本控制器资源
    super.dispose();
  }
}