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

International Phone Number Input v2

intl_phone_number_input_v2 是一个Flutter包，提供了一个可定制的国际电话号码输入小部件。这个包允许开发者轻松地将电话号码输入字段集成到他们的Flutter应用程序中，并支持不同国家的验证和格式化。

Features

• 支持国际电话号码输入。
• 可定制的输入字段。
• 电话号码自动格式化和验证。
• 带有旗帜图标的国家代码选择器。
• 轻量级且易于集成。

Installation

在你的 pubspec.yaml 文件中添加 intl_phone_number_input_v2：

dependencies:
  intl_phone_number_input_v2: ^0.0.2

然后运行 flutter pub get 来安装该包。

Usage

下面是一个如何使用 intl_phone_number_input_v2 包的基本示例：

import 'package:flutter/material.dart';
import 'package:intl_phone_number_input_v2/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 = 'NG';
  PhoneNumber number = PhoneNumber(isoCode: 'NG');

  @override
  Widget build(BuildContext context) {
    return Form(
      key: formKey,
      child: Container(
        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');
              },
            ),
            ElevatedButton(
              onPressed: () {
                formKey.currentState?.validate();
              },
              child: Text('Validate'),
            ),
            ElevatedButton(
              onPressed: () {
                getPhoneNumber('+15417543010');
              },
              child: Text('Update'),
            ),
            ElevatedButton(
              onPressed: () {
                formKey.currentState?.save();
              },
              child: Text('Save'),
            ),
          ],
        ),
      ),
    );
  }

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

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

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

Documentation

有关更详细的文档和示例，请参阅 pub.dev上的包文档。

Contributing

欢迎贡献！请打开一个问题或提交一个包含您更改的拉取请求。确保遵循现有的代码风格，并为任何新功能或错误修复添加测试。

1. 叉仓库。
2. 创建一个新的分支：git checkout -b my-branch-name。
3. 进行更改并提交：git commit -m 'Add new feature'。
4. 推送到分支：git push origin my-branch-name。
5. 提交拉取请求。

License

本项目根据MIT许可证授权——详情请参见 LICENSE 文件。

Acknowledgements

• intl_phone_number_input 为提供基本实现而致谢。