Flutter国际化电话号码输入插件flutter_intl_phone_field的使用
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
更多关于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
:
- 导入必要的包:
import 'package:flutter/material.dart';
import 'package:flutter_intl_phone_field/flutter_intl_phone_field.dart';
- 创建国际化电话号码输入字段:
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应用中实现国际化电话号码输入了。