Flutter电话号码解析与格式化插件phonenumbers的使用

发布于 1周前 作者 htzhanglong 来自 Flutter

Flutter电话号码解析与格式化插件phonenumbers的使用

phonenumbers 是一个用于验证和处理电话号码的纯Dart库，无需任何原生依赖。尽管该包尚未完全准备好用于生产环境，但它提供了一个轻量级且易于使用的解决方案来处理Flutter应用中的电话号码输入和验证。

包状态

请注意：此包尚未为生产环境做好准备。随着时间推移，可能会有一些重大变更，请在使用时留意这一点。

为什么选择phonenumbers？

目前，在pub.dev上有许多用于处理电话号码（如输入、验证等）的包。然而，大多数这些包依赖于像libphonenumber这样的原生库。虽然这些库实现得非常好，但它们并不是专门为Flutter编写的。这意味着Flutter库维护者需要通过平台通道或ffi等机制与这些库进行通信，增加了实现复杂性和失败的可能性。

相比之下，phonenumbers使用了简化版的Dart本地实现，不需要额外的通信层，并且支持同步操作，确保你能够获得即时反馈。

开始使用

安装

  1. 在pubspec.yaml文件中添加phonenumbers: ^1.0.0依赖。
  2. 运行flutter pub get安装包。
  3. 品尝一杯咖啡。

使用示例

导入phonenumbers库，它导出了有用的类如PhoneNumberField小部件：

import 'package:phonenumbers/phonenumbers.dart';

下面是一个完整的示例demo，展示了如何使用PhoneNumberField和PhoneNumberFormField：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
        brightness: Brightness.dark,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Phone Number Input'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(24),
          child: Column(
            children: <Widget>[
              PhoneNumberField(
                controller: PhoneNumberEditingController.fromCountryCode('AZ'), // 设置国家代码为阿塞拜疆
                decoration: InputDecoration(border: OutlineInputBorder()),
              ),
              SizedBox(height: 24),
              PhoneNumberFormField(
                autovalidateMode: AutovalidateMode.always,
                controller: PhoneNumberEditingController.fromCountryCode('TR'), // 设置国家代码为土耳其
                decoration: InputDecoration(border: UnderlineInputBorder()),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

在这个示例中，我们创建了两个电话号码输入字段：一个使用PhoneNumberField，另一个使用PhoneNumberFormField。每个都设置了不同的国家代码（阿塞拜疆和土耳其），并配置了相应的装饰器。

请根据你的项目需求调整国家代码和其他属性。记得在适当的时候释放控制器以节省资源：

@override
void dispose() {
  phoneNumberController.dispose();
  super.dispose();
}

希望这个指南能帮助你在Flutter项目中集成电话号码解析和格式化功能！如果有任何问题或建议，欢迎贡献改进。


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

Harmonyos Next教程
1 回复

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


当然，以下是如何在Flutter应用中使用phonenumbers插件进行电话号码解析与格式化的示例代码。这个插件是基于Google的libphonenumber库，能够处理和格式化国际电话号码。

首先，确保你已经在pubspec.yaml文件中添加了phonenumbers依赖：

dependencies:
  flutter:
    sdk: flutter
  phonenumbers: ^0.x.x  # 请检查最新版本号并替换

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

接下来，是一个简单的Flutter应用示例，展示如何使用phonenumbers插件来解析和格式化电话号码。

import 'package:flutter/material.dart';
import 'package:phonenumbers/phonenumbers.dart' as phonenumbers;

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Phone Number Parsing and Formatting',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final TextEditingController _controller = TextEditingController();
  String _parsedNumber = '';
  String _formattedNumber = '';

  void _parseAndFormatNumber() {
    setState(() {
      String inputNumber = _controller.text;
      
      // 创建一个PhoneNumberUtil实例
      final phoneUtil = phonenumbers.PhoneNumberUtil();
      
      try {
        // 解析电话号码
        var parsedNumber = phoneUtil.parse(inputNumber, "US"); // 假设输入号码来自美国，可以根据需要修改区域代码
        
        // 格式化电话号码为国际格式
        var formattedNumber = phoneUtil.format(parsedNumber, phonenumbers.PhoneNumberFormat.INTERNATIONAL);
        
        _parsedNumber = parsedNumber.toString();
        _formattedNumber = formattedNumber;
      } catch (e) {
        _parsedNumber = 'Invalid number';
        _formattedNumber = '';
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Phone Number Parsing and Formatting'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            TextField(
              controller: _controller,
              decoration: InputDecoration(
                labelText: 'Enter phone number',
              ),
            ),
            SizedBox(height: 16),
            ElevatedButton(
              onPressed: _parseAndFormatNumber,
              child: Text('Parse and Format'),
            ),
            SizedBox(height: 16),
            Text('Parsed Number: $_parsedNumber'),
            SizedBox(height: 8),
            Text('Formatted Number: $_formattedNumber'),
          ],
        ),
      ),
    );
  }
}

在这个示例中：

  1. 我们创建了一个简单的Flutter应用，其中包含一个文本字段用于输入电话号码。
  2. 使用TextEditingController来管理文本字段的状态。
  3. 点击按钮时，调用_parseAndFormatNumber方法。
  4. 在_parseAndFormatNumber方法中，使用PhoneNumberUtil实例来解析和格式化电话号码。
  5. 解析后的号码和格式化后的号码分别显示在屏幕上。

请确保你已经安装了最新版本的phonenumbers插件，并根据需要调整区域代码和其他参数。这个示例只是一个基础示例，你可以根据实际需求进行扩展和修改。

回到顶部