Flutter短信OTP验证插件phone_otp_verification的使用

Flutter短信OTP验证插件phone_otp_verification的使用

插件简介

phone_otp_verification 是一个用于Flutter应用的综合性解决方案，旨在为需要国家选择和电话号码验证的应用提供支持。它提供了丰富的功能，包括国家列表、电话号码验证、OTP（一次性密码）验证等，确保用户能够轻松地完成身份验证过程。该插件支持暗黑模式和浅色模式，并且高度可定制，适用于各种Flutter应用。

主要特性

• 国家列表：包含所有国家的名称和国际区号。
• 按字母排序：国家按字母顺序排列，方便用户查找。
• 搜索功能：通过搜索功能快速找到目标国家。
• 获取完整电话号码：在OTP验证之前捕获完整的电话号码，包括国家区号。
• 优雅的OTP验证界面：设计精美的OTP验证界面，提升用户体验。
• 简单的OTP发送和验证钩子：简化OTP发送和验证的过程，便于与后端系统集成。
• 验证后的回调函数：提供验证成功后的回调函数，用于执行后续操作。
• 主题模式支持：支持暗黑模式和浅色模式。
• 高度可定制：支持添加Logo和自定义文本，保持品牌一致性。
• 易于集成：与任何Flutter应用无缝集成。

快速开始

要在你的Flutter项目中使用 phone_otp_verification 插件，首先需要在 pubspec.yaml 文件中添加依赖：

dependencies:
  phone_otp_verification: ^1.0.3

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

使用示例

最简使用示例

以下是一个最简的使用示例，展示了如何使用 PhoneVerification 小部件进行电话号码验证和OTP验证：

import 'package:flutter/material.dart';
import 'package:phone_otp_verification/phone_verification.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const HomePage(),
    );
  }
}

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

  [@override](/user/override)
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return PhoneVerification(
      isFirstPage: true, // 是否显示初始页面
      onSend: (String value) {
        print('Phone number: $value'); // 打印电话号码
      },
      onVerification: (String value) {
        print('OTP: $value'); // 打印OTP
      },
    );
  }
}

自定义使用示例

你可以通过传递更多的参数来自定义 PhoneVerification 小部件的外观和行为。以下是一个更复杂的示例，展示了如何自定义主题颜色、背景颜色、初始页面文本等：

import 'package:flutter/material.dart';
import 'package:phone_otp_verification/phone_verification.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const HomePage(),
    );
  }
}

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

  [@override](/user/override)
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return PhoneVerification(
      isFirstPage: true, // 是否显示初始页面
      enableLogo: false, // 是否显示Logo
      themeColor: Colors.blueAccent, // 主题颜色
      backgroundColor: Colors.black, // 背景颜色
      initialPageText: "Verify Phone Number", // 初始页面文本
      initialPageTextStyle: const TextStyle(
        color: Colors.white, // 文本颜色
        fontSize: 20, // 字体大小
        fontWeight: FontWeight.bold, // 字体粗细
      ),
      textColor: Colors.white, // 其他文本颜色
      onSend: (String value) {
        print('Phone number: $value'); // 打印电话号码
      },
      onVerification: (String value) {
        print('OTP: $value'); // 打印OTP
      },
    );
  }
}

参数说明

• isFirstPage：是否显示初始页面，默认为 true。
• enableLogo：是否显示Logo，默认为 true。
• themeColor：主题颜色，默认为 Colors.blue。
• backgroundColor：背景颜色，默认为 Colors.white。
• initialPageText：初始页面的提示文本，默认为 "Enter your phone number"。
• initialPageTextStyle：初始页面文本的样式，默认为白色、20px、加粗。
• textColor：其他文本的颜色，默认为黑色。
• onSend：发送OTP时的回调函数，参数为电话号码。
• onVerification：验证OTP时的回调函数，参数为OTP。

更多信息

该插件的设计目的是为了简化Flutter应用中的国家选择和OTP验证流程。如果你需要了解更多关于插件的功能和用法，可以参考官方文档（内容已移除链接）。此外，欢迎开发者通过GitHub提交问题或贡献代码，帮助我们不断完善这个插件。

总结

phone_otp_verification 插件为Flutter开发者提供了一个强大且易用的工具，用于实现电话号码验证和OTP验证功能。通过简单的配置和自定义选项，开发者可以快速集成该插件，提升应用的安全性和用户体验。希望这个插件能为你的项目带来便利！

完整示例代码

以下是完整的示例代码，包含了最简使用和自定义使用的两个版本：

import 'package:flutter/material.dart';
import 'package:phone_otp_verification/phone_verification.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const HomePage(),
    );
  }
}

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

  [@override](/user/override)
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  bool isCustomized = false;

  void toggleCustomization() {
    setState(() {
      isCustomized = !isCustomized;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Phone OTP Verification Example'),
        actions: [
          IconButton(
            icon: const Icon(Icons.toggle_on),
            onPressed: toggleCustomization,
            tooltip: isCustomized ? 'Switch to Minimal' : 'Switch to Customized',
          ),
        ],
      ),
      body: Center(
        child: isCustomized
            ? PhoneVerification(
                isFirstPage: true,
                enableLogo: false,
                themeColor: Colors.blueAccent,
                backgroundColor: Colors.black,
                initialPageText: "Verify Phone Number",
                initialPageTextStyle: const TextStyle(
                  color: Colors.white,
                  fontSize: 20,
                  fontWeight: FontWeight.bold,
                ),
                textColor: Colors.white,
                onSend: (String value) {
                  print('Phone number: $value');
                },
                onVerification: (String value) {
                  print('OTP: $value');
                },
              )
            : PhoneVerification(
                isFirstPage: true,
                onSend: (String value) {
                  print('Phone number: $value');
                },
                onVerification: (String value) {
                  print('OTP: $value');
                },
              ),
      ),
    );
  }
}