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

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

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

简介

Intl Phone Number Input 是一个简单且可定制的Flutter包，用于以国际格式输入电话号码。它使用Google的libphonenumber库进行验证和格式化。

功能特性

  • 支持Web。
  • 支持RTL语言。
  • 选择器模式包括下拉菜单、底部弹出框和对话框。
  • 实时格式化：根据所选国家/地区格式化输入。
  • 获取地区信息：通过PhoneNumber.getRegionInfoFromPhoneNumber(String phoneNumber, [String isoCode])获取。
  • 格式化电话号码：使用PhoneNumber.getParsableNumber(String phoneNumber, String isoCode)或PhoneNumber Reference.parseNumber()。
  • 自定义国家列表：例如 ['NG', 'GH', 'BJ' 'TG', 'CI']。

更新日志

  • 更新了Android上的libphonenumber和PhoneNumberToCarrierMapper。
  • 移除了对libphonenumber的依赖。
  • iOS上从libphonenumber-iOS切换到PhoneNumberKit。
  • 更新libphonenumber.js文件。
  • 计划在未来版本中弃用getNameForNumber方法。

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>

或者查看GitHub中的/example文件夹。

注意事项

PhoneNumber.getRegionInfoFromPhoneNumber(String phoneNumber, [String isoCode])可能会抛出异常，如果电话号码无法识别，建议传递国家ISO代码或确保字符串以"+"开头。

使用说明

构造函数

  • InternationalPhoneNumberInput

可用参数

参数 数据类型 初始值
onInputChanged function(PhoneNumber) null
onSaved function(PhoneNumber) null
onInputValidated function(bool) null
focusNode FocusNode null
textFieldController TextEditingController TextEditingController()
onSubmit Function() null
keyboardAction TextInputAction null
keyboardType TextInputType TextInputType.phone
countries List null
textStyle TextStyle null
selectorTextStyle TextStyle null
inputBorder InputBorder null
inputDecoration InputDecoration null
initialValue PhoneNumber null
hintText String “Phone Number”
selectorButtonOnErrorPadding double 24
spaceBetweenSelectorAndTextField double 12
maxLength integer 15
isEnabled boolean true
autoFocus boolean false
autoValidateMode AutovalidateMode AutovalidateMode.disabled
formatInput boolean true
errorMessage String “Invalid phone number”
selectorConfig SelectorConfig SelectorConfig()
ignoreBlank boolean false
locale String null
searchBoxDecoration InputDecoration null
textAlign TextAlign TextAlign.start
textAlignVertical TextAlignVertical TextAlignVertical.center
scrollPadding EdgeInsets EdgeInsets.all(20.0)
countrySelectorScrollControlled boolean true
cursorColor Color null
autofillHints Iterable<String> null

示例代码

下面是一个完整的示例代码，展示了如何使用intl_phone_number_input插件来创建一个可以输入国际电话号码的表单：

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

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

class MyApp extends StatelessWidget {
  @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
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final GlobalKey<FormState> formKey = GlobalKey<FormState>();

  final TextEditingController controller = TextEditingController();
  String initialCountry = 'CN'; // 设置初始国家为中国
  PhoneNumber number = PhoneNumber(isoCode: 'CN'); // 初始化电话号码对象

  @override
  Widget build(BuildContext context) {
    return Form(
      key: formKey,
      child: Container(
        padding: EdgeInsets.all(16.0),
        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');
              },
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                formKey.currentState?.validate();
              },
              child: Text('Validate'),
            ),
            ElevatedButton(
              onPressed: () {
                getPhoneNumber('+8613800138000'); // 更新电话号码
              },
              child: Text('Update'),
            ),
            ElevatedButton(
              onPressed: () {
                formKey.currentState?.save();
              },
              child: Text('Save'),
            ),
          ],
        ),
      ),
    );
  }

  void getPhoneNumber(String phoneNumber) async {
    PhoneNumber number =
        await PhoneNumber.getRegionInfoFromPhoneNumber(phoneNumber, 'CN');

    setState(() {
      this.number = number;
    });
  }

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

在这个示例中，我们创建了一个包含国际电话号码输入框的表单，并提供了验证、更新和保存功能。你可以根据需要调整初始国家、电话号码格式等配置项。

希望这个指南能帮助你更好地理解和使用intl_phone_number_input插件！如果有任何问题或需要进一步的帮助，请随时提问。


更多关于Flutter国际电话号码输入插件intl_phone_number_input的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter国际电话号码输入插件intl_phone_number_input的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter项目中使用intl_phone_number_input插件来实现国际电话号码输入的示例代码。这个插件可以帮助你轻松地实现电话号码的格式化、验证和国际化。

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

dependencies:
  flutter:
    sdk: flutter
  intl_phone_number_input: ^0.9.0  # 请检查最新版本号

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

接下来，你可以在你的Flutter应用中使用这个插件。以下是一个简单的示例，展示如何在一个页面中实现国际电话号码输入：

import 'package:flutter/material.dart';
import 'package:intl_phone_number_input/intl_phone_number_input.dart';
import 'package:intl_phone_number_input/utils/utils.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: PhoneNumberInputScreen(),
    );
  }
}

class PhoneNumberInputScreen extends StatefulWidget {
  @override
  _PhoneNumberInputScreenState createState() => _PhoneNumberInputScreenState();
}

class _PhoneNumberInputScreenState extends State<PhoneNumberInputScreen> {
  final GlobalKey<FormState> _formKey = GlobalKey<FormState>();
  PhoneNumber? _phoneNumber;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('国际电话号码输入示例'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Form(
          key: _formKey,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              IntlPhoneNumberInput(
                onInputChanged: (PhoneNumber? number) {
                  setState(() {
                    _phoneNumber = number;
                  });
                },
                onErrorChanged: (PhoneNumberError? error) {
                  print(error);
                },
                defaultCountry: 'us',
                preferredCountries: ['+1', 'cn', 'in'],
                initialSelection: 'us',
                nationalMode: false,
                autoValidateMode: AutovalidateMode.always,
                textFieldController: TextEditingController(),
                decoration: InputDecoration(
                  labelText: '输入电话号码',
                  errorText: _phoneNumber?.error?.message,
                ),
              ),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: () {
                  if (_formKey.currentState!.validate()) {
                    // 处理有效的电话号码
                    print('电话号码: ${_phoneNumber?.number}');
                    print('国际格式化电话号码: ${_phoneNumber?.formattedNumber}');
                    print('国家代码: ${_phoneNumber?.countryCode}');
                  }
                },
                child: Text('提交'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

在这个示例中：

  1. 我们首先导入了必要的包。
  2. 在MyApp类中，我们定义了应用的主页为PhoneNumberInputScreen。
  3. 在PhoneNumberInputScreen类中，我们使用IntlPhoneNumberInput小部件来创建一个电话号码输入字段。
  4. 我们为IntlPhoneNumberInput小部件提供了多个参数，包括onInputChanged回调（用于更新状态），onErrorChanged回调（用于处理错误），以及默认国家、首选国家和初始选择等配置。
  5. 我们还添加了一个提交按钮，当表单验证通过时，打印出电话号码的相关信息。

这样，你就可以在你的Flutter应用中实现国际电话号码输入功能了。请确保你已经安装了intl_phone_number_input插件，并且已经导入了必要的包。

回到顶部