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

国际化电话字段包

该插件是一个自定义的Flutter TextFormField，用于输入国际电话号码，并附带国家代码。

此小部件可用于创建一个定制的文本字段，以便为任何国家输入电话号码，并且可以选择从下拉菜单中选择国家代码。

警告：该插件已废弃，此仓库不再维护

截至2021年6月，@marcaureln正在维护由@vanshg395最初创建的Flutter插件。遗憾的是，Vansh目前未响应，因此无法发布新版本（最新发布的版本已有6个月未更新）。

鉴于此情况，建议用户在pub.dev上探索替代方案，或者有兴趣的话可以fork此仓库以获得持续支持。生活可能会很忙，我希望Vansh一切顺利。

感谢您的理解和持续支持。

旧文档

屏幕截图

安装

要使用此包：

运行以下命令：

flutter pub add intl_phone_field_fork

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

dependencies:
  intl_phone_field_fork: ^<latest_version>

有时你可能想使用包的最新版本而不是已发布的版本。为此，使用git语法：

dependencies:
  intl_phone_field_fork:
    git:
      url: git://github.com/vanshg395/intl_phone_field_fork.git
      ref: master

如何使用

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

IntlPhoneField(
    decoration: InputDecoration(
        labelText: 'Phone Number',
        border: OutlineInputBorder(
            borderSide: BorderSide(),
        ),
    ),
    initialCountryCode: 'IN',
    onChanged: (phone) {
        print(phone.completeNumber);
    },
)

使用initialCountryCode来设置初始国家代码。

示例代码

以下是一个完整的示例，展示了如何在Flutter应用中使用intl_phone_field_fork插件：

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

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

class MyApp extends StatefulWidget {
  [@override](/user/override)
  _MyAppState createState() => _MyAppState();
}

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

  FocusNode focusNode = FocusNode();

  [@override](/user/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: () {
                    _formKey.currentState?.validate();
                  },
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}