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

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

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

国际化电话字段包

flutter_intl_phone_field 是一个用于在Flutter应用中输入国际电话号码的自定义 TextFormField,支持选择国家代码。

截图

安装

要使用此插件,请运行以下命令:

flutter pub add flutter_intl_phone_field

或者,在 pubspec.yaml 文件中添加:

dependencies:
  flutter_intl_phone_field: ^<latest_version>

如果您想使用最新版本而不是发布的版本,可以使用 git 语法:

dependencies:
  flutter_intl_phone_field:
    git:
      url: git://github.com/rvndsngwn/flutter_intl_phone_field.git
      ref: master

如何使用

创建一个 IntlPhoneField 小部件,并传递所需的参数:

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

示例 Demo

下面是一个完整的示例程序,展示了如何在实际应用中使用 flutter_intl_phone_field 插件:

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

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

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  State<MyApp> createState() => _MyAppState();
}

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

  FocusNode focusNode = FocusNode();

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

贡献

欢迎提交拉取请求。对于重大更改,请先打开一个问题以讨论您想要更改的内容。

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

许可证

该项目根据 MIT 许可证许可。有关更多信息,请参见 LICENSE


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

1 回复

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


当然,以下是如何在Flutter项目中使用flutter_intl_phone_field插件来实现国际化电话号码输入的示例代码。

首先,确保你已经在pubspec.yaml文件中添加了flutter_intl_phone_field依赖:

dependencies:
  flutter:
    sdk: flutter
  flutter_intl_phone_field: ^latest_version  # 替换为最新版本号

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

接下来,在你的Flutter应用中,你可以按照以下步骤来使用flutter_intl_phone_field

  1. 导入必要的包
import 'package:flutter/material.dart';
import 'package:flutter_intl_phone_field/flutter_intl_phone_field.dart';
  1. 创建国际化电话号码输入字段
void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Intl Phone Field Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: PhoneNumberInputScreen(),
    );
  }
}

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

class _PhoneNumberInputScreenState extends State<PhoneNumberInputScreen> {
  PhoneNumber phoneNumber = PhoneNumber();
  TextEditingController controller = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Intl Phone Number Input'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            IntlPhoneField(
              decoration: InputDecoration(
                labelText: 'Enter your phone number',
                border: OutlineInputBorder(),
              ),
              initialSelectionLength: 0,
              autoValidateMode: AutovalidateMode.onUserInteraction,
              onChanged: (PhoneNumber value) {
                setState(() {
                  phoneNumber = value;
                });
              },
              onFormattedChanged: (String value) {
                print('Formatted phone number: $value');
              },
              onInputChanged: (String value) {
                print('Raw input: $value');
              },
              controller: controller,
              keyboardType: TextInputType.phone,
              ignoreBlankSpaces: false,
              inputFormatters: [
                FilteringTextInputFormatter.digitsOnly,
              ],
              enableActiveCountryFilter: true,
              favoriteCountries: ['+1', 'us'], // Example: Add US as a favorite
              selectionDialogTextStyle: TextStyle(fontSize: 18),
              selectionDialogBackgroundColor: Colors.white,
              initialCountryCode: 'us',
              errorMessage: 'Invalid phone number',
              validator: (PhoneNumber value) {
                if (value == null || value.isEmpty) {
                  return 'Phone number is required';
                }
                return null;
              },
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                if (phoneNumber.isValid) {
                  showDialog(
                    context: context,
                    builder: (context) => AlertDialog(
                      title: Text('Phone Number'),
                      content: Text('Formatted: ${phoneNumber.formatInternational}'),
                    ),
                  );
                } else {
                  ScaffoldMessenger.of(context).showSnackBar(
                    SnackBar(content: Text('Please enter a valid phone number')),
                  );
                }
              },
              child: Text('Submit'),
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中,我们创建了一个包含IntlPhoneField的Flutter应用。这个字段允许用户输入并格式化国际电话号码。以下是一些关键点的解释:

  • IntlPhoneField:这是主要的电话号码输入字段组件。
  • decoration:用于自定义输入框的外观。
  • onChanged:当电话号码变化时触发,返回格式化后的PhoneNumber对象。
  • onFormattedChanged:当格式化后的电话号码变化时触发。
  • onInputChanged:当原始输入变化时触发。
  • controller:用于控制输入框的文本。
  • ignoreBlankSpaces:是否忽略空格。
  • inputFormatters:用于限制输入格式,例如只允许输入数字。
  • enableActiveCountryFilter:是否启用活动国家过滤器。
  • favoriteCountries:设置偏好国家列表。
  • initialCountryCode:设置初始国家代码。
  • errorMessage:验证失败时的错误消息。
  • validator:自定义验证函数。

这样,你就可以在Flutter应用中实现国际化电话号码输入了。

回到顶部