Flutter国际电话号码输入与验证插件intl_phone_field_with

Flutter国际电话号码输入与验证插件intl_phone_field_with_validator的使用

此插件对intl_phone_field的电话号码验证部分进行了修改和改进，以满足我的需求。

屏幕截图

安装

要使用此插件，请运行以下命令：

flutter pub add intl_phone_field_with_validator

或者，在你的pubspec.yaml文件中添加以下依赖项：

dependencies:
  intl_phone_field_with_validator: ^0.1.0

如何使用

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

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

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

示例代码

以下是完整的示例代码，展示了如何在表单中使用IntlPhoneField进行电话号码输入和验证：

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

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

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

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

  [@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(
                  decoration: InputDecoration(
                    labelText: 'Phone Number',
                    border: OutlineInputBorder(
                      borderSide: BorderSide(),
                    ),
                  ),
                  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() ?? false) {
                      // 表单验证成功后的处理逻辑
                    }
                  },
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

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

itying888 1楼

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

intl_phone_field_with_validator 是一个用于 Flutter 的插件，它提供了一个带有国际电话号码输入和验证功能的文本字段。这个插件基于 intl_phone_field，并增加了对电话号码验证的支持。

安装插件

首先，你需要在 pubspec.yaml 文件中添加依赖项：

dependencies:
  flutter:
    sdk: flutter
  intl_phone_field_with_validator: ^2.0.0  # 请使用最新版本

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

使用示例

以下是一个简单的示例，展示了如何使用 intl_phone_field_with_validator 插件来输入和验证国际电话号码：

import 'package:flutter/material.dart';
import 'package:intl_phone_field_with_validator/intl_phone_field_with_validator.dart';
import 'package:intl_phone_field_with_validator/phone_number.dart';

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: PhoneInputScreen(),
    );
  }
}

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

class _PhoneInputScreenState extends State<PhoneInputScreen> {
  final GlobalKey<FormState> _formKey = GlobalKey<FormState>();
  PhoneNumber? _phoneNumber;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Phone Input Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Form(
          key: _formKey,
          child: Column(
            children: [
              IntlPhoneFieldWithValidator(
                decoration: InputDecoration(
                  labelText: 'Phone Number',
                  border: OutlineInputBorder(),
                ),
                initialCountryCode: 'US',
                onChanged: (phone) {
                  print(phone.completeNumber);
                },
                onSaved: (phone) {
                  _phoneNumber = phone;
                },
                validator: (phone) {
                  if (phone == null || phone.number.isEmpty) {
                    return 'Please enter a valid phone number';
                  }
                  return null;
                },
              ),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: () {
                  if (_formKey.currentState!.validate()) {
                    _formKey.currentState!.save();
                    // 你可以在这里处理电话号码
                    print('Phone number: ${_phoneNumber!.completeNumber}');
                  }
                },
                child: Text('Submit'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}