Flutter电话号码提示插件phone_number_hint的使用

Flutter电话号码提示插件phone_number_hint的使用

phone_number_hint 是一个Flutter包，它提供了一种简单的方法来从用户的设备检索电话号码提示。它使用了由Google Play服务提供的电话号码提示API。

电话号码提示API的优点包括：

• 不需要额外的权限请求
• 消除了用户手动输入电话号码的需求
• 不需要Google账户
• 不直接与登录/注册工作流相关联
• 相比于自动填充功能，支持更广泛的Android版本

功能

• 电话号码提示功能：从用户的设备检索电话号码提示。
• 简单集成：简单的API用于请求和显示电话号码提示。

DEMO

开始使用

安装

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

dependencies:
  phone_number_hint: ^1.0.0

然后运行 flutter pub get 来安装这个包。

完整示例代码

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

import 'package:flutter/services.dart';
import 'package:phone_number_hint/phone_number_hint.dart';

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

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

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String _result = 'Unknown';
  final _phoneNumberHintPlugin = PhoneNumberHint();
  TextEditingController _controller = TextEditingController();

  [@override](/user/override)
  void initState() {
    super.initState();
  }

  // 平台消息是异步的，所以我们用异步方法初始化。
  Future<void> getPhoneNumber() async {
    String? result;
    // 平台消息可能会失败，所以我们使用try/catch PlatformException。
    // 我们还处理消息可能返回null的情况。
    try {
      result = await _phoneNumberHintPlugin.requestHint() ?? '';
      _controller.text = result; // 将获取到的电话号码设置到文本控制器中
    } on PlatformException {
      result = 'Failed to get hint.'; // 获取提示失败
    }

    // 如果小部件在异步平台消息飞行时从树上移除，
    // 我们希望丢弃回复而不是调用setState来更新我们不存在的外观。
    if (!mounted) return;

    setState(() {
      _result = result ?? ''; // 更新状态
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: LoginScreen(
        onFocus: () {
          getPhoneNumber(); // 调用获取电话号码的方法
        },
        controller: _controller, // 传递文本控制器
      ),
    );
  }
}

class LoginScreen extends StatelessWidget {
  Function onFocus;
  TextEditingController controller;

  LoginScreen({required this.onFocus, required this.controller});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Login'), // 登录页面标题
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            const Text(
              'Enter your phone number', // 提示用户输入电话号码
              style: TextStyle(
                fontSize: 18.0,
                fontWeight: FontWeight.bold,
              ),
            ),
            const SizedBox(height: 16.0),
            Focus(
              onFocusChange: (focus) {
                if (focus) {
                  onFocus(); // 当焦点改变时调用获取电话号码的方法
                }
              },
              child: TextFormField(
                controller: controller, // 绑定文本控制器
                keyboardType: TextInputType.phone, // 设置键盘类型为电话号码
                decoration: const InputDecoration(
                  hintText: 'Phone Number', // 输入框提示文字
                ),
              ),
            ),
            const SizedBox(height: 16.0),
            ElevatedButton(
              onPressed: () {
                onFocus(); // 点击按钮时调用获取电话号码的方法
              },
              child: const Text(
                'Submit', // 提交按钮的文字
                style: TextStyle(
                  fontSize: 16.0,
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}