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

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

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

phone_text_field 是一个用于Flutter的插件，允许你解析、验证、格式化国际电话号码，并支持多种语言的本地化。

安装步骤

1. 添加依赖

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

dependencies:
  phone_text_field: any

2. 获取包

通过IDE的GUI或命令行获取包：

$ flutter pub get

3. 导入插件

在你的Dart文件中导入 phone_text_field：

import 'package:phone_text_field/phone_text_field.dart';

功能特点

  • 验证电话号码
  • 选择国家代码
  • 支持阿拉伯语、英语和法语

使用示例

默认组件

PhoneTextField(
    onChanged: (value) {
        print(value.completeNumber);
    },
),

自定义样式

PhoneTextField(
    locale: const Locale('en'),
    decoration: const InputDecoration(
        filled: true,
        contentPadding: EdgeInsets.zero,
        enabledBorder: OutlineInputBorder(
            borderRadius: BorderRadius.all(Radius.circular(10.0)),
            borderSide: BorderSide(),
        ),
        focusedBorder: OutlineInputBorder(
            borderRadius: BorderRadius.all(Radius.circular(10.0)),
            borderSide: BorderSide(),
        ),
        prefixIcon: Icon(Icons.phone),
        labelText: "Phone number",
    ),
    searchFieldInputDecoration: const InputDecoration(
        filled: true,
        enabledBorder: OutlineInputBorder(
            borderRadius: BorderRadius.all(Radius.circular(10.0)),
            borderSide: BorderSide(),
        ),
        focusedBorder: OutlineInputBorder(
            borderRadius: BorderRadius.all(Radius.circular(10.0)),
            borderSide: BorderSide(),
        ),
        suffixIcon: Icon(Icons.search),
        hintText: "Search country",
    ),
    initialCountryCode: "AE",
    onChanged: (phone) {
        debugPrint(phone.completeNumber);
    },
),

阿拉伯语样式

PhoneTextField(
    locale: const Locale('ar'),
    decoration: const InputDecoration(
        filled: true,
        contentPadding: EdgeInsets.zero,
        enabledBorder: OutlineInputBorder(
            borderRadius: BorderRadius.all(Radius.circular(10.0)),
            borderSide: BorderSide(),
        ),
        focusedBorder: OutlineInputBorder(
            borderRadius: BorderRadius.all(Radius.circular(10.0)),
            borderSide: BorderSide(),
        ),
        prefixIcon: Icon(Icons.phone),
        labelText: "رقم الهاتف",
    ),
    searchFieldInputDecoration: const InputDecoration(
        filled: true,
        enabledBorder: OutlineInputBorder(
            borderRadius: BorderRadius.all(Radius.circular(10.0)),
            borderSide: BorderSide(),
        ),
        focusedBorder: OutlineInputBorder(
            borderRadius: BorderRadius.all(Radius.circular(10.0)),
            borderSide: BorderSide(),
        ),
        suffixIcon: Icon(Icons.search),
        hintText: "بحث عن بالاسم او الرمز",
    ),
    dialogTitle: "اختر الدوله",
    initialCountryCode: "AE",
    onChanged: (phone) {
        debugPrint(phone.completeNumber);
    },
),

完整示例Demo

以下是完整的示例应用程序代码：

import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:phone_text_field/phone_text_field.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      locale: const Locale('en'),
      localizationsDelegates: const [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
      ],
      supportedLocales: const [
        Locale('ar'),
        Locale('en'),
        Locale('fr'),
      ],
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Phone Text Field"),
      ),
      body: Padding(
        padding: const EdgeInsets.all(15),
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  const Text(
                    "Basic Widget",
                    textScaleFactor: 1.5,
                  ),
                  PhoneTextField(
                    initialValue: '+2001090718223',
                    initialCountryCode: '+971',
                    countryViewOptions: CountryViewOptions.countryCodeOnly,
                    showCountryCodeAsIcon: true,
                    onChanged: (value) {
                      print(value.completeNumber);
                    },
                  ),
                ],
              ),
              Column(
                children: [
                  const Text(
                    "Decoration Widget",
                    textScaleFactor: 1.5,
                  ),
                  const SizedBox(height: 20),
                  PhoneTextField(
                    locale: const Locale('en'),
                    decoration: const InputDecoration(
                      filled: true,
                      contentPadding: EdgeInsets.zero,
                      enabledBorder: OutlineInputBorder(
                        borderRadius: BorderRadius.all(Radius.circular(10.0)),
                        borderSide: BorderSide(),
                      ),
                      focusedBorder: OutlineInputBorder(
                        borderRadius: BorderRadius.all(Radius.circular(10.0)),
                        borderSide: BorderSide(),
                      ),
                      prefixIcon: Icon(Icons.phone),
                      labelText: "Phone number",
                    ),
                    searchFieldInputDecoration: const InputDecoration(
                      filled: true,
                      enabledBorder: OutlineInputBorder(
                        borderRadius: BorderRadius.all(Radius.circular(10.0)),
                        borderSide: BorderSide(),
                      ),
                      focusedBorder: OutlineInputBorder(
                        borderRadius: BorderRadius.all(Radius.circular(10.0)),
                        borderSide: BorderSide(),
                      ),
                      suffixIcon: Icon(Icons.search),
                      hintText: "Search country",
                    ),
                    initialCountryCode: "AE",
                    onChanged: (phone) {
                      debugPrint(phone.completeNumber);
                    },
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

这个示例展示了如何使用 phone_text_field 插件来创建一个电话号码输入字段，包括基本的和带有自定义样式的版本。你可以根据需要调整配置以适应你的应用需求。


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

Harmonyos Next教程
1 回复

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


当然，以下是如何在Flutter应用中使用phone_text_field插件的一个详细代码示例。phone_text_field是一个用于输入和格式化电话号码的Flutter插件。

首先，确保你已经在pubspec.yaml文件中添加了phone_text_field依赖：

dependencies:
  flutter:
    sdk: flutter
  phone_text_field: ^2.0.0  # 请检查最新版本号

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

接下来，在你的Flutter应用中，你可以按照以下步骤使用PhoneTextField：

  1. 导入包：
import 'package:flutter/material.dart';
import 'package:phone_text_field/phone_text_field.dart';
  1. 创建一个包含PhoneTextField的Widget：
void main() {
  runApp(MyApp());
}

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

class MyPhoneInputForm extends StatefulWidget {
  @override
  _MyPhoneInputFormState createState() => _MyPhoneInputFormState();
}

class _MyPhoneInputFormState extends State<MyPhoneInputForm> {
  final _formKey = GlobalKey<FormState>();
  String _phoneNumber = '';

  @override
  Widget build(BuildContext context) {
    return Form(
      key: _formKey,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          PhoneTextField(
            decoration: InputDecoration(
              labelText: 'Phone Number',
              border: OutlineInputBorder(),
            ),
            keyboardType: TextInputType.phone,
            initialSelection: TextSelection.collapsed(offset: -1),
            autoValidateMode: AutovalidateMode.onUserInteraction,
            validator: (value) {
              if (value == null || value.isEmpty) {
                return 'Please enter a phone number.';
              }
              return null;
            },
            onChanged: (value) {
              setState(() {
                _phoneNumber = value;
              });
            },
            onSubmitted: (value) {
              if (_formKey.currentState!.validate()) {
                // Handle form submission, e.g., save the phone number
                print('Submitted phone number: $_phoneNumber');
              }
            },
          ),
          SizedBox(height: 20),
          ElevatedButton(
            onPressed: () {
              if (_formKey.currentState!.validate()) {
                // Perform actions when the form is valid
                _formKey.currentState!.save();
                print('Form submitted with phone number: $_phoneNumber');
              }
            },
            child: Text('Submit'),
          ),
        ],
      ),
    );
  }
}

代码解释

  1. 导入包：

    • 导入flutter/material.dart用于基本的UI组件。
    • 导入phone_text_field/phone_text_field.dart用于电话号码输入组件。

  2. 创建应用入口：

    • MyApp是应用的根Widget，包含MaterialApp和Scaffold。

  3. 创建表单Widget：

    • MyPhoneInputForm是一个StatefulWidget，包含一个表单，其中包含一个PhoneTextField和一个提交按钮。

  4. PhoneTextField的使用：

    • decoration：设置输入框的装饰，包括标签文本和边框。
    • keyboardType：设置为电话号码键盘。
    • initialSelection：设置初始光标位置。
    • autoValidateMode：设置表单验证模式。
    • validator：定义输入验证逻辑，如果输入为空则返回错误信息。
    • onChanged：当输入内容改变时触发，更新状态中的电话号码。
    • onSubmitted：当表单提交时触发，如果验证通过则处理提交逻辑。

  5. 提交按钮：

    • ElevatedButton是一个带有点击效果的按钮，当点击时触发表单验证和提交逻辑。

这段代码展示了如何在Flutter应用中使用phone_text_field插件来输入和验证电话号码。你可以根据需求进一步自定义和扩展。

回到顶部