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

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

《Flutter Phone Validation Package by Nonstop IO》

Flutter Phone Validation Package by Nonstop IO 是一个功能强大且易于使用的 Flutter 包，旨在验证来自超过200个国家的电话号码。通过该包，用户可以无缝地将电话号码验证集成到他们的 Flutter 应用程序中，从而增强用户体验并确保数据完整性。

屏幕截图

• 包含国家代码和电话号码字段的小部件

• 国家代码列表下拉菜单选项

• 包含国家代码、电话号码字段及区号格式的小部件

功能

• 国家选择下拉菜单：用户可以从下拉菜单中选择所需的国家代码，使验证不同地区的电话号码变得简单。

• 全面验证：该包支持来自超过200个国家的电话号码验证，确保准确性和包容性。

• 多种数字格式：用户可以以不同的格式输入电话号码，并且该包能够适应并验证这些格式。这包括对各种掩码和格式的支持。

• 国家内的区号支持：该包提供了对国家内区号的支持。用户可以输入带区号的电话号码，并在验证时考虑这一点。此功能增强了该包的灵活性和适用于那些区号是电话号码重要组成部分的地区的能力。

入门指南

要将 Flutter Phone Validation Package 集成到您的项目中，请遵循以下简单步骤：

1. 在 pubspec.yaml 文件中添加该包：

   dependencies:
     ns_intl_phone_input: ^1.0.0
   

2. 运行以下命令安装包：

   flutter pub get
   

3. 在 Dart 文件中导入该包：

   import 'package:ns_intl_phone_input/ns_intl_phone_input.dart';
   

4. 在您的 UI 中实现 NsIntlPhoneInput 小部件，并提供必要的回调和自定义选项：

   NsIntlPhoneInput(
     textEditingController: _phoneNumberController,
     enableValidation: false,
     onPhoneChange: (countrySelection) {
       setState(() {
         this.countrySelection = countrySelection;
       });
     },
     // 其他自定义选项...
   ),
   

使用说明

国家选择

该包提供了一个用户友好的国家选择下拉菜单，允许用户为电话号码验证选择相关的国家代码。

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

  @override
  State<SampleScreen> createState() => _SampleScreenState();
}

class _SampleScreenState extends State<SampleScreen> {
  // 初始化用于国际文本编辑的控制器
  final _phoneNumberController = IntlTextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('NsIntlPhoneInput 示例',
              style: Theme.of(context).textTheme.titleLarge),
        ),
        body: Center(
          // 分配给 NsIntlPhoneInput 小部件
          child: NsIntlPhoneInput(
            textEditingController: _phoneNumberController,
            onPhoneChange: (countrySelection) {
              print(countrySelection);
            },
          ),
        ));
  }
}

初始化电话

_phoneNumberController.initialPhone(
  phoneNumber: '9876543210',
  intlDialCode: '91',
);

清除电话号码及其国家代码

_phoneNumberController.clear();

电话号码验证

通过 onPhoneChange 回调轻松验证电话号码。该包支持各种电话号码格式。

MaterialButton(
  onPressed: () {
    if (_formKey.currentState!.validate()) {
      print('有效电话号码');
    } else {
      print('无效电话号码');
    }
  },
  child: const Text('提交'),
),

自定义

您可以根据应用需求自定义该包的各种选项，如初始国家代码、格式化等。

NsIntlPhoneInput(
  // 电话号码控制器
  textEditingController: _phoneNumberController,

  // 启用或禁用验证
  enableValidation: false,
  autovalidateMode: AutovalidateMode.always,

  // 国家选择选项以提高用户体验
  countrySelectOption: const CountrySelectOption(
    countryDialCodeTextStyle: TextStyle(),
    countryIsoCodeTextStyle: TextStyle(),
    defaultText: "000",
    defaultTextStyle: TextStyle(),
    showCode: false,
  ),

  // 可选地选择国家选择作为对话框或新屏幕
  countrySelectionType: CountrySelectionTypeEnum.screen,
  focusNode: FocusNode(),
  phoneFieldDecoration: const InputDecoration(),
  phoneInputFontSize: 20,
  validationErrorText: "验证消息",
  onPhoneChange: (countrySelection) {
    setState(() {
      this.countrySelection = countrySelection;
    });
  },
),