Flutter短信自动填充插件alt_sms_autofill的使用

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

Flutter短信自动填充插件 alt_sms_autofill 的使用

alt_sms_autofill 是一个用于在Flutter应用中监听和获取新到达的短信内容的插件。它能够将接收到的短信完整地返回到应用程序中,您可以根据需要进行处理。

Getting Started

这个项目用于接收新到达的短信并在应用程序中显示。短信内容会完整返回到应用程序中,您可以根据需要对其进行分割或处理。

示例动画

添加依赖

首先,在您的 pubspec.yaml 文件中添加 alt_sms_autofill 依赖:

dependencies:
  alt_sms_autofill: ^version

请将 ^version 替换为最新的版本号。

导入库

在您的 Dart 文件中导入以下包:

import 'package:alt_sms_autofill/alt_sms_autofill.dart';

使用方法

下面是一个完整的示例,展示了如何使用 alt_sms_autofill 插件来监听并显示接收到的短信内容。

示例代码

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

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String? _commingSms = 'Unknown';

  // 初始化短信监听器
  Future<void> initSmsListener() async {
    String? commingSms;
    try {
      commingSms = await AltSmsAutofill().listenForSms;
    } on PlatformException {
      commingSms = 'Failed to get Sms.';
    }
    if (!mounted) return;

    setState(() {
      _commingSms = commingSms;
    });
  }

  @override
  void dispose() {
    // 注销监听器
    AltSmsAutofill().unregisterListener();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('AltAutoFill example app'),
        ),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Center(
              child: Text('Running on: $_commingSms\n'),
            ),
            TextButton(
              child: Text('Listen for sms code'),
              onPressed: initSmsListener,
            ),
          ],
        ),
      ),
    );
  }
}

参数说明

  • listenForSms: 监听来自本地插件的短信代码。
  • unregisterListener: 注销广播接收器,必须在 dispose 方法中调用。

注意事项

  1. 权限:确保在 AndroidManifest.xml 中添加了必要的权限:
    <uses-permission android:name="android.permission.RECEIVE_SMS"/>
    <uses-permission android:name="android.permission.READ_SMS"/>
    

更多关于Flutter短信自动填充插件alt_sms_autofill的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter短信自动填充插件alt_sms_autofill的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,以下是一个关于如何在Flutter项目中使用alt_sms_autofill插件的示例代码。这个插件可以帮助你实现短信验证码的自动填充功能。

首先,你需要在你的pubspec.yaml文件中添加alt_sms_autofill依赖:

dependencies:
  flutter:
    sdk: flutter
  alt_sms_autofill: ^x.y.z  # 请替换为最新版本号

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

接下来,你需要在你的Flutter应用中配置和使用这个插件。以下是一个简单的示例,展示如何在登录页面中使用alt_sms_autofill来自动填充短信验证码。

  1. 导入插件

在你的Dart文件中导入alt_sms_autofill插件:

import 'package:alt_sms_autofill/alt_sms_autofill.dart';
  1. 配置AndroidManifest.xml

确保你的AndroidManifest.xml文件中添加了必要的权限和接收器配置,以允许应用接收短信并处理自动填充请求。不过,alt_sms_autofill插件通常会在其内部处理这些配置,但你可能需要确保你的应用具有接收SMS的权限。

<uses-permission android:name="android.permission.RECEIVE_SMS"/>
<uses-permission android:name="android.permission.READ_SMS"/>

注意:实际项目中,请根据需要请求这些权限,并处理用户的权限授予状态。

  1. 使用插件

在你的登录页面代码中,设置监听器来监听短信验证码的接收,并自动填充到验证码输入框中。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: LoginPage(),
    );
  }
}

class LoginPage extends StatefulWidget {
  @override
  _LoginPageState createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  final TextEditingController _phoneNumberController = TextEditingController();
  final TextEditingController _otpController = TextEditingController();

  @override
  void initState() {
    super.initState();

    // 初始化alt_sms_autofill监听器
    AltSmsAutofill.addListener((SmsMessage message) {
      // 检查短信内容是否包含验证码(这里简单假设验证码是6位数字)
      RegExp regExp = RegExp(r'\d{6}');
      Iterable<Match> matches = regExp.allMatches(message.body);
      if (matches.isNotEmpty) {
        String otp = matches.first.group(0)!;
        // 自动填充验证码到输入框
        _otpController.value = _otpController.value.copyWith(text: otp);
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Login Page'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            TextField(
              controller: _phoneNumberController,
              decoration: InputDecoration(labelText: 'Phone Number'),
              keyboardType: TextInputType.phone,
            ),
            SizedBox(height: 16),
            TextField(
              controller: _otpController,
              decoration: InputDecoration(labelText: 'OTP'),
              keyboardType: TextInputType.number,
              maxLength: 6,
            ),
            SizedBox(height: 16),
            ElevatedButton(
              onPressed: () {
                // 发送验证码逻辑(这里省略)
                // ...
              },
              child: Text('Send OTP'),
            ),
          ],
        ),
      ),
    );
  }

  @override
  void dispose() {
    // 移除监听器
    AltSmsAutofill.removeListener();
    _phoneNumberController.dispose();
    _otpController.dispose();
    super.dispose();
  }
}

在这个示例中,我们创建了一个简单的登录页面,包含电话号码输入框和验证码输入框。当用户输入电话号码并点击“Send OTP”按钮时(发送验证码的逻辑省略了),应用会监听接收到的短信。当收到包含6位数字验证码的短信时,插件会自动将验证码填充到验证码输入框中。

请注意,这只是一个基本的示例,实际应用中你可能需要添加更多的错误处理和用户交互逻辑。此外,根据具体的应用场景,你可能还需要调整正则表达式的匹配规则,以确保能够正确提取验证码。

回到顶部