Flutter电话号码输入插件phone_text_form_field的使用

Flutter电话号码输入插件phone_text_form_field的使用

Demo

Demo 图片

使用方法

InternationalPhoneNumberInput

可用参数

InternationalPhoneFormField(
// height: 60,
controller: controller,
inputFormatters: const [],
formatter: MaskedInputFormatter('### ### ## ##'),
initCountry: CountryCodeModel(
name: "United States", dial_code: "+1", code: "US"),
onInputChanged: (phone) {
print(phone.code);
print(
'complete phone number' + phone.dial_code + phone.number);
print(phone.number);
print(phone.rawFullNumber);
print(phone.rawNumber);
print(phone.rawDialCode);
},
/*       dialogConfig: DialogConfig(
                  backgroundColor: const Color(0xFF444448),
                  searchBoxBackgroundColor: const Color(0xFF56565a),
                  searchBoxIconColor: const Color(0xFFFAFAFA),
                  countryItemHeight: 55,
                  flatFlag: true,
                  topBarColor: const Color(0xFF1B1C24),
                  selectedItemColor: const Color(0xFF56565a),
                  selectedIcon: Padding(
                    padding: const EdgeInsets.only(left: 10),
                    child: Image.asset(
                      "assets/check.png",
                      width: 20,
                      fit: BoxFit.fitWidth,
                    ),
                  ),
                  textStyle: TextStyle(
                      color: const Color(0xFFFAFAFA).withOpacity(0.7),
                      fontSize: 14,
                      fontWeight: FontWeight.w600),
                  searchBoxTextStyle: TextStyle(
                      color: const Color(0xFFFAFAFA).withOpacity(0.7),
                      fontSize: 14,
                      fontWeight: FontWeight.w600),
                  titleStyle: const TextStyle(
                      color: Color(0xFFFAFAFA),
                      fontSize: 18,
                      fontWeight: FontWeight.w700),
                  searchBoxHintStyle: TextStyle(
                      color: const Color(0xFFFAFAFA).withOpacity(0.7),
                      fontSize: 14,
                      fontWeight: FontWeight.w600),
                ),
                countryConfig: CountryConfig(
                    decoration: BoxDecoration(
                      border:
                          Border.all(width: 2, color: const Color(0xFF3f4046)),
                      borderRadius: BorderRadius.circular(8),
                    ),
                    flatFlag: true,
                    noFlag: false,
                    textStyle: const TextStyle(
                        color: Colors.black,
                        fontSize: 16,
                        fontWeight: FontWeight.w600)),*/
/*  validator: (number) {
                  if (number.number.isEmpty) {
                    return "The phone number cannot be left emptyssss";
                  }
                  return null;
                },*/
/*   phoneConfig: PhoneConfig(
                  focusedColor: const Color(0xFF6D59BD),
                  enabledColor: const Color(0xFF6D59BD),
                  errorColor: const Color(0xFFFF5494),
                  labelStyle: null,
                  labelText: null,
                  floatingLabelStyle: null,
                  focusNode: null,
                  radius: 8,
                  hintText: "Phone Number",
                  borderWidth: 2,
                  backgroundColor: Colors.transparent,
                  decoration: null,
                  popUpErrorText: true,
                  autoFocus: false,
                  showCursor: false,
                  textInputAction: TextInputAction.done,
                  autovalidateMode: AutovalidateMode.onUserInteraction,
                  errorTextMaxLength: 2,
                  errorPadding: const EdgeInsets.only(top: 14),
                  errorStyle: const TextStyle(
                      color: Color(0xFFFF5494), fontSize: 12, height: 1),
                  textStyle: const TextStyle(
                      color: Colors.black,
                      fontSize: 16,
                      fontWeight: FontWeight.w400),
                  hintStyle: TextStyle(
                      color: Colors.black.withOpacity(0.5),
                      fontSize: 16,
                      fontWeight: FontWeight.w400),
                ),*/
),
参数名 数据类型 初始值
controller TextEditingController TextEditingController()
height double 60
inputFormatters List []
formatter MaskedInputFormatter MaskedInputFormatter(’### ### ## ##’)
initCountry CountryCodeModel CountryCodeModel(name: “United States”, dial_code: “+1”, code: “US”)
betweenPadding double 23
onInputChanged Function(IntPhoneNumber number) null
loadFromJson Future<String?> Function() null
dialogConfig DialogConfig DialogConfig()
countryConfig CountryConfig CountryConfig()
phoneConfig PhoneConfig PhoneConfig()
validator String? Function(IntPhoneNumber number)? null

IntPhoneNumber

函数 onInputChanged 将返回一个 IntPhoneNumber 类型的对象。

print(phone.code);          //US
print(phone.dial_code);     //+1
print(phone.number);        //553 142 88 74
print(phone.rawFullNumber); //15531428874
print(phone.rawNumber);     //5531428874
print(phone.rawDialCode);   //1

查看 example 文件夹中的示例文件以获取更多详细信息。

完整示例代码

import 'package:flutter/material.dart';
import 'package:phone_text_form_field/phone_number_field.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(const MyApp());
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowMaterialGrid: false,
      debugShowCheckedModeBanner: false,
      home: LoginScreen(),
    );
  }
}

class LoginScreen extends StatelessWidget {
  TextEditingController controller = TextEditingController();
  String? data;
  final _formKey = GlobalKey<FormState>();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Login'),
      ),
      body: Padding(
        padding: EdgeInsets.all(16.0),
        child: Form(
          key: _formKey,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              TextFormField(
                decoration: InputDecoration(labelText: 'Username'),
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return 'Please enter your username';
                  }
                  return null;
                },
              ),
              InternationalPhoneFormField(
                // height: 60,
                controller: controller,
                inputFormatters: const [],
                formatter: MaskedInputFormatter('### ### ## ##'),
                initCountry: CountryCodeModel(
                    name: "United States", dial_code: "+1", code: "US"),
                onInputChanged: (phone) {
                  print(phone.code);
                  print(
                      'complete phone number' + phone.dial_code + phone.number);
                  print(phone.number);
                  print(phone.rawFullNumber);
                  print(phone.rawNumber);
                  print(phone.rawDialCode);
                },
                /*       dialogConfig: DialogConfig(
                  backgroundColor: const Color(0xFF444448),
                  searchBoxBackgroundColor: const Color(0xFF56565a),
                  searchBoxIconColor: const Color(0xFFFAFAFA),
                  countryItemHeight: 55,
                  flatFlag: true,
                  topBarColor: const Color(0xFF1B1C24),
                  selectedItemColor: const Color(0xFF56565a),
                  selectedIcon: Padding(
                    padding: const EdgeInsets.only(left: 10),
                    child: Image.asset(
                      "assets/check.png",
                      width: 20,
                      fit: BoxFit.fitWidth,
                    ),
                  ),
                  textStyle: TextStyle(
                      color: const Color(0xFFFAFAFA).withOpacity(0.7),
                      fontSize: 14,
                      fontWeight: FontWeight.w600),
                  searchBoxTextStyle: TextStyle(
                      color: const Color(0xFFFAFAFA).withOpacity(0.7),
                      fontSize: 14,
                      fontWeight: FontWeight.w600),
                  titleStyle: const TextStyle(
                      color: Color(0xFFFAFAFA),
                      fontSize: 18,
                      fontWeight: FontWeight.w700),
                  searchBoxHintStyle: TextStyle(
                      color: const Color(0xFFFAFAFA).withOpacity(0.7),
                      fontSize: 14,
                      fontWeight: FontWeight.w600),
                ),
                countryConfig: CountryConfig(
                    decoration: BoxDecoration(
                      border:
                          Border.all(width: 2, color: const Color(0xFF3f4046)),
                      borderRadius: BorderRadius.circular(8),
                    ),
                    flatFlag: true,
                    noFlag: false,
                    textStyle: const TextStyle(
                        color: Colors.black,
                        fontSize: 16,
                        fontWeight: FontWeight.w600)),*/
                /*  validator: (number) {
                  if (number.number.isEmpty) {
                    return "The phone number cannot be left emptyssss";
                  }
                  return null;
                },*/
                /*   phoneConfig: PhoneConfig(
                  focusedColor: const Color(0xFF6D59BD),
                  enabledColor: const Color(0xFF6D59BD),
                  errorColor: const Color(0xFFFF5494),
                  labelStyle: null,
                  labelText: null,
                  floatingLabelStyle: null,
                  focusNode: null,
                  radius: 8,
                  hintText: "Phone Number",
                  borderWidth: 2,
                  backgroundColor: Colors.transparent,
                  decoration: null,
                  popUpErrorText: true,
                  autoFocus: false,
                  showCursor: false,
                  textInputAction: TextInputAction.done,
                  autovalidateMode: AutovalidateMode.onUserInteraction,
                  errorTextMaxLength: 2,
                  errorPadding: const EdgeInsets.only(top: 14),
                  errorStyle: const TextStyle(
                      color: Color(0xFFFF5494), fontSize: 12, height: 1),
                  textStyle: const TextStyle(
                      color: Colors.black,
                      fontSize: 16,
                      fontWeight: FontWeight.w400),
                  hintStyle: TextStyle(
                      color: Colors.black.withOpacity(0.5),
                      fontSize: 16,
                      fontWeight: FontWeight.w400),
                ),*/
              ),
              TextFormField(
                decoration: InputDecoration(labelText: 'Password'),
                obscureText: true,
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return 'Please enter your password';
                  }
                  return null;
                },
              ),
              SizedBox(height: 20.0),
              ElevatedButton(
                onPressed: () {
                  if (_formKey.currentState?.validate() ?? false) {
                    ScaffoldMessenger.of(context).showSnackBar(
                      SnackBar(content: Text('Processing Data')),
                    );
                  }
                },
                child: Text('Login'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

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

1 回复

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


phone_text_form_field 是一个用于 Flutter 应用的插件，它提供了一个带有国家代码选择的电话号码输入框。这个插件可以帮助用户更方便地输入电话号码，并且自动根据选择的国家代码格式化电话号码。

安装

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

dependencies:
  flutter:
    sdk: flutter
  phone_text_form_field: ^1.0.0  # 请使用最新版本

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

使用

在你的 Flutter 应用中使用 PhoneTextFormField 非常简单。以下是一个基本的示例：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Phone Text Form Field Example'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: PhoneTextFormField(
            onChanged: (phone) {
              print('Phone number: ${phone.completeNumber}');
            },
            onCountryChanged: (country) {
              print('Selected country: ${country.name}');
            },
          ),
        ),
      ),
    );
  }
}

参数说明

PhoneTextFormField 提供了多个参数来自定义输入框的行为和外观。以下是一些常用的参数：

  • onChanged: 当电话号码发生变化时触发回调。
  • onCountryChanged: 当用户选择的国家代码发生变化时触发回调。
  • initialCountryCode: 设置初始的国家代码，例如 US 表示美国。
  • decoration: 自定义输入框的装饰，例如提示文本、边框样式等。
  • keyboardType: 设置键盘类型，默认是 TextInputType.phone。
  • validator: 用于验证输入的电话号码是否有效。

示例：自定义验证和初始国家代码

PhoneTextFormField(
  initialCountryCode: 'US',
  decoration: InputDecoration(
    labelText: 'Phone Number',
    border: OutlineInputBorder(),
  ),
  validator: (phone) {
    if (phone == null || phone.completeNumber.isEmpty) {
      return 'Please enter a valid phone number';
    }
    return null;
  },
  onChanged: (phone) {
    print('Phone number: ${phone.completeNumber}');
  },
  onCountryChanged: (country) {
    print('Selected country: ${country.name}');
  },
)

获取完整的电话号码

你可以通过 phone.completeNumber 获取完整的电话号码，包括国家代码。

onChanged: (phone) {
  print('Complete phone number: ${phone.completeNumber}');
}
回到顶部