Flutter电话号码验证插件validate_phone_number的使用

特性

这是一个带有内置国家代码选择器的简单文本表单字段，可以根据国家代码验证手机号码长度。我们可以根据需要进行自定义。

开始使用

要使用此包，请运行以下命令：

flutter pub add validate_phone_number

或者，在你的pubspec.yaml文件中添加以下内容：

dependencies:
  validate_phone_number: ^1.1.0

然后运行flutter pub get以获取依赖项。

使用方法

首先，在你的Dart代码中导入该库：

import 'package:validate_phone_number/validate_phone_number.dart';

接下来，使用ValidatePhoneNumber类，并传递所需的参数：

ValidatePhoneNumber(
  controller: controller,
  onCountrySelected: (phoneCode, countryCode) {
    print('$phoneCode   $countryCode');
  },
);

完整示例

以下是一个完整的示例代码，展示了如何在Flutter应用中使用validate_phone_number插件。

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(),
      home: const MyHomePage(),
    );
  }
}

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

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  // 创建一个TextEditingController来管理输入框的值
  TextEditingController controller = TextEditingController();

  // 创建一个全局的FormState来管理表单状态
  final _formKey = GlobalKey<FormState>();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 20),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // 创建一个表单并包含电话号码验证组件
            Form(
              key: _formKey,
              child: ValidatePhoneNumber(
                controller: controller,
                onCountrySelected: (phoneCode, countryCode) {
                  // 当国家代码被选中时打印信息
                  print('== data $phoneCode == $countryCode');
                },
              ),
            ),
            const SizedBox(
              height: 20,
            ),
            // 添加一个按钮来测试表单验证
            ElevatedButton(
              onPressed: () {
                // 验证表单
                if (_formKey.currentState!.validate()) {
                  print('validate');
                }
              },
              child: const Text('Test'),
            )
          ],
        ),
      ),
    );
  }
}