Flutter电话号码格式化与验证插件libphonenumber_plugin的使用

libphonenumber_plugin

Flutter plugin for Google libphonenumber.

⚠️ Notice

此插件与libphonenumber有类似的实现。

该插件现在支持Android、iOS和Web

要使用此插件，只需在pubspec.yaml文件中添加libphonenumber_plugin: ^any作为依赖项。

⚠️ 此插件可能在未来与原始的libphonenumber合并，目前没有更多信息。

Android 和 iOS 使用

本插件现支持 Android 和 iOS。

对于稳定的 Android 和 iOS 实现，请使用libphonenumber，因为它受到了启发并且与libphonenumber有相似的实现。

Web 使用

在你的应用目录中，编辑web/index.html以添加以下内容：

<!DOCTYPE html>
<html>
    <head>
        ...
    </head>
    <body>
    
        ...

        <script src="assets/packages/libphonenumber_plugin/js/libphonenumber.js"></script>
        <script src="assets/packages/libphonenumber_plugin/js/stringbuffer.js"></script>

        ...

        <script src="main.dart.js" type="application/javascript"></script>
    </body>
</html>

使用插件

一旦你添加了libphonenumber_plugin插件并编辑了web/index.html，你应该能够使用：

import 'package:libphonenumber_plugin/libphonenumber_plugin.dart';

或任何其他之后可用的源库。

可用方法

有关可用方法，请参阅libphonenumber_platform_interface

Future Works 🚀

支持带有 Dart FFI 的 Windows 和 MacOS
未来可能会与原始的libphonenumber合并，目前没有更多信息。

Contributions

如果你遇到任何问题或缺少功能，请随时打开一个issue。自由地fork，改进插件并提出pull request。

Contributors

Made with contributors-img.

示例代码

下面是一个完整的示例demo，展示了如何使用libphonenumber_plugin进行电话号码的格式化与验证：

import 'dart:async';
import 'dart:developer';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:libphonenumber_plugin/libphonenumber_plugin.dart';

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

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

  @override
  MyAppState createState() => MyAppState();
}

class MyAppState extends State<MyApp> {
  final String _platformVersion = 'Unknown';

  @override
  void initState() {
    super.initState();
    initPlatformState();
  }

  Future<void> initPlatformState() async {
    try {
      String phoneNumber = '+212700000000';
      String regionCode = 'US';

      var formattedNumber =
          await PhoneNumberUtil.formatAsYouType(phoneNumber, regionCode);

      log('\n\n\n Output ==>> $formattedNumber \n\n\n');

      var regionInfo = await PhoneNumberUtil.getRegionInfo(phoneNumber, '');
      log('\n\n\n Output Valid ==>> $regionInfo \n\n\n');

      var countries = await PhoneNumberUtil.getAllCountries();

      var exampleNumber = await PhoneNumberUtil.getFormattedExampleNumber(
          regionCode, PhoneNumberType.MOBILE, PhoneNumberFormat.INTERNATIONAL);

      log('\n\n\n Output Countries ==>> $countries \n\n\n');
      log('\n\n\n Output Example Number ==>> $exampleNumber \n\n\n');

      phoneNumber = '+2348021234567';

      final normalizedNumber = await PhoneNumberUtil.normalizePhoneNumber(phoneNumber, 'NG', PhoneNumberFormat.NATIONAL);

      log('\n\n\n Output NormalizedNumber ===> $normalizedNumber \n\n\n');

      String digits = '';
      for (final number in phoneNumber.characters) {
        digits += number;
        final formattedNumber =
            await PhoneNumberUtil.formatAsYouType(digits, 'NG');

        log(' Output AsYouTypeFormatter ==> $formattedNumber');
      }
    } on PlatformException catch (e) {
      log('\n\n\n PLATFORM EXCEPTION: \n\n\n $e \n\n\n');
    }
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Plugin example app'),
          actions: [
            IconButton(
              icon: const Icon(Icons.refresh),
              onPressed: () => initPlatformState(),
            )
          ],
        ),
        body: Center(
          child: Text('Running on: $_platformVersion\n'),
        ),
      ),
    );
  }
}

通过上述代码，你可以体验到libphonenumber_plugin在不同场景下的强大功能，包括电话号码的格式化、验证以及获取国家信息等。希望这个插件能为你的项目带来便利！

更多关于Flutter电话号码格式化与验证插件libphonenumber_plugin的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

sinazl 1楼•2 天前

更多关于Flutter电话号码格式化与验证插件libphonenumber_plugin的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

当然，下面是一个关于如何在Flutter项目中使用libphonenumber_plugin插件进行电话号码格式化和验证的示例代码。这个插件基于Google的libphonenumber库，能够处理各种国际电话号码格式和验证。

首先，你需要在你的pubspec.yaml文件中添加这个插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  libphonenumber_plugin: ^0.2.0  # 请确保版本号是最新的

然后运行flutter pub get来安装依赖。

接下来，你可以在你的Flutter应用中这样使用它：

1. 导入插件

在你的Dart文件中导入插件：

import 'package:libphonenumber_plugin/libphonenumber_plugin.dart';

2. 初始化插件

在使用之前，你需要初始化插件。这通常在应用的initState方法中完成：

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

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final PhoneNumberPlugin phoneNumberPlugin = PhoneNumberPlugin();

  @override
  void initState() {
    super.initState();
    // 初始化插件
    phoneNumberPlugin.initialize().then((_) {
      // 初始化完成后的逻辑
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('PhoneNumberPlugin Demo'),
        ),
        body: Center(
          child: PhoneNumberDemo(),
        ),
      ),
    );
  }
}

3. 格式化电话号码

使用插件的parse方法来格式化电话号码：

class PhoneNumberDemo extends StatefulWidget {
  @override
  _PhoneNumberDemoState createState() => _PhoneNumberDemoState();
}

class _PhoneNumberDemoState extends State<PhoneNumberDemo> {
  String formattedNumber = '';

  void formatPhoneNumber(String rawNumber) async {
    PhoneNumber parseResult = await phoneNumberPlugin.parsePhoneNumber(
      rawNumber,
      'US'  // 国家代码，可以是用户选择的区域代码
    );

    if (parseResult != null) {
      setState(() {
        formattedNumber = parseResult.formattedNumber;
      });
    } else {
      print('Failed to parse phone number');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        TextField(
          decoration: InputDecoration(
            labelText: 'Enter Phone Number',
          ),
          onChanged: (value) {
            // 实时格式化（可选）
            formatPhoneNumber(value);
          },
        ),
        SizedBox(height: 20),
        Text(
          'Formatted Number: $formattedNumber',
          style: TextStyle(fontSize: 20),
        ),
      ],
    );
  }
}

4. 验证电话号码

使用插件的isValidPhoneNumber方法来验证电话号码：

void validatePhoneNumber(String rawNumber) async {
  bool isValid = await phoneNumberPlugin.isValidPhoneNumber(
    rawNumber,
    'US'  // 国家代码
  );

  if (isValid) {
    print('Valid phone number');
  } else {
    print('Invalid phone number');
  }
}

你可以在TextField的onEditingComplete回调中调用validatePhoneNumber方法，或者在按钮点击事件中调用它：

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    TextField(
      decoration: InputDecoration(
        labelText: 'Enter Phone Number',
      ),
      onEditingComplete: () {
        validatePhoneNumber(yourTextFieldController.text);
      },
    ),
    SizedBox(height: 20),
    ElevatedButton(
      onPressed: () {
        validatePhoneNumber(yourTextFieldController.text);
      },
      child: Text('Validate'),
    ),
    SizedBox(height: 20),
    Text(
      'Formatted Number: $formattedNumber',
      style: TextStyle(fontSize: 20),
    ),
  ],
);

注意：上面的代码片段假设你有一个TextFieldController来控制你的TextField。你需要初始化这个控制器并将其与TextField关联起来。

希望这些代码示例能帮助你在Flutter项目中成功使用libphonenumber_plugin插件进行电话号码的格式化和验证。