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

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

国际电话文本字段 🌐

此插件提供了可以用来输入国际电话号码的Flutter小部件。它高度可定制，并且可以用于输入任何格式的电话号码。此外，它还提供了一种验证电话号码并返回国家代码和电话号码的方法。它还带有一个内置的底部弹出菜单来选择国家代码。

下一版本的路线图

  • 增加对深色和浅色主题的全面支持
  • 增加完全自定义文本字段的功能

关注和支持我

Telegram LinkedIn Instagram
Telegram LinkedIn Instagram

特性

banner

小部件有两个版本

单行版本 双行版本
verions1 verions1

开始使用

在pubspec.yaml文件中添加包。

dependencies:
  international_phone_text_field: ^0.0.1+5

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

在代码中导入包。

import 'package:international_phone_text_field/international_phone_text_field.dart';

使用方法

要使用此包，你需要输入以下代码：

InternationalPhoneField(
  onChanged: (number) {
    print(number);
  },
)

✌️这是使用该包的最小化代码

额外信息

如果您遇到任何问题，请随时打开一个issue。如果您觉得该包缺少功能，请在Github上提出建议，我会进行考虑。Pull请求也欢迎。

完整示例

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

void main() {
  runApp(
    MaterialApp(
      home: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('国际电话文本字段示例'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          children: [
            /// InternationalPhoneTextField 小部件
            /// 带有 onChanged 回调
            InternationalPhoneTextField(
              onChanged: (number) {},
              
              /// 控制文本样式，默认为false
              inOneLine: true,
            ),
          ],
        ),
      ),
    );
  }
}

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

1 回复

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


当然，以下是如何在Flutter项目中使用international_phone_text_field插件来输入国际电话号码的一个详细示例。这个插件可以简化国际电话号码的输入过程，并自动处理国家代码的选择和格式化。

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

dependencies:
  flutter:
    sdk: flutter
  international_phone_text_field: ^0.20.0  # 请检查最新版本号

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

接下来，在你的Flutter项目中，你可以像这样使用InternationalPhoneTextField：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'International Phone TextField Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('International Phone TextField Example'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: InternationalPhoneTextFieldExample(),
        ),
      ),
    );
  }
}

class InternationalPhoneTextFieldExample extends StatefulWidget {
  @override
  _InternationalPhoneTextFieldExampleState createState() => _InternationalPhoneTextFieldExampleState();
}

class _InternationalPhoneTextFieldExampleState extends State<InternationalPhoneTextFieldExample> {
  final TextEditingController _controller = TextEditingController();
  final InternationalPhoneNumber _initialPhoneNumber = InternationalPhoneNumber(
    phoneNumber: '+1234567890',
    isoCode: 'US',
  );

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        InternationalPhoneTextField(
          controller: _controller,
          initialSelection: 'US',
          initialPhoneNumber: _initialPhoneNumber,
          onPhoneNumberChanged: (phone) {
            print("Phone number changed: ${phone.phoneNumber}");
            print("Country code: ${phone.countryCode}");
            print("ISO Code: ${phone.isoCode}");
          },
          onCountryChanged: (country) {
            print("Country changed: ${country.name}");
          },
          keyboardType: TextInputType.phone,
          textStyle: Text
Style        (SizedfontSizeBox:( height1:8 ),2
0          ),decoration
:         InputElevDecorationated(Button
(            
label          Texton:Pressed ':Enter () your { phone
 number            ',//
 获取            并border处理:电话号码 Outline
Input            Borderfinal(), phone
          ),
        ),Number = _controller.text;
            print("Final phone number: $phoneNumber");
          },
          child: Text('Submit'),
        ),
      ],
    );
  }

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

在这个示例中，我们创建了一个简单的Flutter应用，其中包含一个InternationalPhoneTextField。这个字段允许用户选择国家并输入电话号码。当用户更改电话号码或国家时，我们会在控制台中打印出相应的信息。

一些关键点：

  • controller：用于管理TextField中的文本。
  • initialSelection：设置初始的国家选择。
  • initialPhoneNumber：设置初始的电话号码。
  • onPhoneNumberChanged：当电话号码改变时回调。
  • onCountryChanged：当选择的国家改变时回调。
  • keyboardType：设置键盘类型，这里设置为电话号码键盘。
  • textStyle 和 decoration：用于自定义TextField的样式和装饰。

确保你已经在你的项目中正确设置了international_phone_text_field插件，并且检查了它的文档以获取最新的使用方法和功能。

回到顶部