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

特性

Phonefield 提供了一个带选择器的自定义电话字段。

开始使用

要使用此插件，请在 pubspec.yaml 文件中添加以下依赖：

dependencies:
  phonefield: ^1.0.0

使用方法

可以查看示例目录以获取详细的示例代码：

示例代码

import 'dart:developer';

import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:phonefield/phonefield.dart';

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

class MainApp extends HookWidget {
  const MainApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    final selectedCountry = useState<({String name, String code})?>(null);
    final selectedState = useState<String?>(null);

    final formKey = useMemoized(() => GlobalKey<FormState>());
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text("Example"),
        ),
        body: Form(
          key: formKey,
          child: ListView(
            children: [
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: PhoneField(
                  // 可选参数：禁用输入框
                  // isEnabled: false,
                  initialPhoneNumber: "+9779817194337",
                  onChanged: (p0) {},
                ),
              ),
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: CountryPicker(
                  labelText: "国家",
                  hintText: "请选择国家",
                  selectedCountry: selectedCountry,
                  onChanged: (p0) {
                    selectedState.value = null;
                  },
                  validator: (p0) {
                    if (p0 == null) {
                      return "请选择国家";
                    }
                    return null;
                  },
                ),
              ),
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: StatePicker(
                  labelText: "州/省",
                  enabled: selectedCountry.value != null,
                  hintText: "请选择州/省",
                  countryCode: selectedCountry.value?.code,
                  selectedState: selectedState,
                  validator: (p0) {
                    if (p0 == null || p0.isEmpty) {
                      return selectedCountry.value != null
                          ? "请选择州/省"
                          : "请先选择国家再选择州/省";
                    }
                    return null;
                  },
                ),
              ),
              ValueListenableBuilder<({String code, String name})?>(
                  valueListenable: selectedCountry,
                  builder: (context, country, child) {
                    return Text("选择的国家 = ${country?.name}");
                  }),
              Text("选择的州/省 = ${selectedState.value}"),
              FilledButton(
                onPressed: () async {
                  selectedCountry.value = null;
                },
                child: const Text("清除国家"),
              ),
              FilledButton(
                onPressed: () async {
                  if (formKey.currentState?.validate() ?? false) {
                    var phone = await PhoneField.getPhoneNumber("+16465006465");
                    if (phone != null && phone.isValid == false) {
                      log(phone.message.toString());
                      return;
                    }
                    log("成功");
                  }
                },
                child: const Text("提交"),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

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

sinazl 1楼•5 天前

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

当然，以下是如何在Flutter项目中使用phone_field插件来实现电话号码输入的示例代码。phone_field是一个用于验证和格式化国际电话号码的Flutter插件。

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

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

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

接下来，在你的Flutter项目中创建一个包含电话号码输入的页面。以下是一个完整的示例代码：

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

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

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

class PhoneNumberInputScreen extends StatefulWidget {
  @override
  _PhoneNumberInputScreenState createState() => _PhoneNumberInputScreenState();
}

class _PhoneNumberInputScreenState extends State<PhoneNumberInputScreen> {
  PhoneFieldController _controller;

  @override
  void initState() {
    super.initState();
    _controller = PhoneFieldController();
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Phone Number Input Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            PhoneField(
              controller: _controller,
              decoration: InputDecoration(
                labelText: 'Enter your phone number',
                border: OutlineInputBorder(),
              ),
              keyboardType: TextInputType.phone,
              autoValidateMode: AutovalidateMode.onUserInteraction,
              validator: (value) {
                if (value == null || value.isEmpty) {
                  return 'Phone number is required';
                }
                return null;
              },
              onChanged: (value) {
                print('Formatted phone number: $value');
              },
              onSubmitted: (value) {
                print('Submitted phone number: $value');
              },
            ),
            SizedBox(height: 16),
            ElevatedButton(
              onPressed: () {
                if (_controller.text.isValid) {
                  // Do something with the valid phone number
                  print('Valid phone number: ${_controller.text}');
                } else {
                  // Handle invalid phone number
                  print('Invalid phone number');
                }
              },
              child: Text('Submit'),
            ),
          ],
        ),
      ),
    );
  }
}

代码解释：

依赖导入：首先导入phone_field包。
主应用：MyApp是一个简单的Material应用，包含一个主页PhoneNumberInputScreen。
电话号码输入页面：PhoneNumberInputScreen是一个有状态的组件，用于管理电话号码输入。
PhoneFieldController：用于控制电话号码输入字段的状态。在initState中初始化，在dispose中释放资源。
PhoneField：核心组件，用于输入和格式化电话号码。
- controller：用于管理电话号码输入的状态。
- decoration：用于自定义输入框的样式。
- keyboardType：设置为电话号码键盘。
- autoValidateMode：在用户交互时自动验证。
- validator：一个简单的验证器，检查电话号码是否为空。
- onChanged和onSubmitted：分别在电话号码变化和提交时触发。
提交按钮：一个按钮，用于检查电话号码的有效性并执行相应操作。

这样，你就可以在Flutter应用中实现一个功能完善的电话号码输入字段了。