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

International Phone Field Package

这是一个定制化的Flutter TextFormField，用于输入国际电话号码并带有国家代码选择。

此小部件可用于创建自定义文本字段以接收任何国家/地区的电话号码输入，并提供从下拉菜单中选择国家代码的选项。

Screenshots

Installing

要使用这个包，请执行以下命令：

flutter pub add intl_phone_field

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

dependencies:
  intl_phone_field: ^3.1.0

How to Use

只需创建一个IntlPhoneField小部件，并传递所需的参数：

IntlPhoneField(
    decoration: InputDecoration(
        labelText: 'Phone Number',
        border: OutlineInputBorder(
            borderSide: BorderSide(),
        ),
    ),
    initialCountryCode: 'IN', // 使用initialCountryCode设置初始国家代码
    onChanged: (phone) {
        print(phone.completeNumber);
    },
)

完整示例Demo

下面是一个完整的示例demo，展示了如何在表单中使用IntlPhoneField组件来收集用户的电话号码信息。此示例还包括了其他字段（如姓名和电子邮件）以及提交按钮。

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

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

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

class _MyAppState extends State<MyApp> {
  GlobalKey<FormState> _formKey = GlobalKey();

  FocusNode focusNode = FocusNode();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: Text('Phone Field Example'),
        ),
        body: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 16.0),
          child: Form(
            key: _formKey,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                SizedBox(height: 30),
                TextField(
                  decoration: InputDecoration(
                    labelText: 'Name',
                    border: OutlineInputBorder(
                      borderSide: BorderSide(),
                    ),
                  ),
                ),
                SizedBox(
                  height: 10,
                ),
                TextField(
                  decoration: InputDecoration(
                    labelText: 'Email',
                    border: OutlineInputBorder(
                      borderSide: BorderSide(),
                    ),
                  ),
                ),
                SizedBox(
                  height: 10,
                ),
                IntlPhoneField(
                  focusNode: focusNode,
                  decoration: InputDecoration(
                    labelText: 'Phone Number',
                    border: OutlineInputBorder(
                      borderSide: BorderSide(),
                    ),
                  ),
                  languageCode: "en",
                  onChanged: (phone) {
                    print(phone.completeNumber);
                  },
                  onCountryChanged: (country) {
                    print('Country changed to: ' + country.name);
                  },
                ),
                SizedBox(
                  height: 10,
                ),
                MaterialButton(
                  child: Text('Submit'),
                  color: Theme.of(context).primaryColor,
                  textColor: Colors.white,
                  onPressed: () {
                    if (_formKey.currentState!.validate()) {
                      // 提交表单逻辑
                      ScaffoldMessenger.of(context).showSnackBar(
                        SnackBar(content: Text('Submitting')),
                      );
                    }
                  },
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

Contributing

欢迎贡献代码。对于重大更改，请先打开问题讨论您想要更改的内容。

请确保根据需要更新测试。

在Issue或Pull Request上评论，要求@all-contributors添加贡献者：

[@all-contributors](/user/all-contributors) please add @<username> for <contributions>

<contributions>: 查看 Emoji Key (Contribution Types Reference) 获取有效的贡献类型列表。

Maintainers

• Vansh Goel
• Alex N’Guessan

Contributors

感谢所有为本项目做出贡献的人们！

Vansh Goel 💻	KNO3 💻	Ling Li 💻	Anggara Putra Pratama 💻	JJ Geewax 💻	Keval Prajapati 💻	Guillaume Launay 💻
hans.huang 💻 📖

LICENSE

以上就是关于intl_phone_field插件的详细介绍和使用方法。希望这对您有所帮助！如果您有任何疑问或需要进一步的帮助，请随时提问。