Flutter短信验证码UI插件phone_auth_otp_ui的使用

Phone Auth OTP UI 是一个用于手机号验证码认证的 UI 插件，它具有许多超酷的功能，例如根据用户位置自动更新国家代码、带有搜索功能的国家选择屏幕、用于验证用户手机号码的验证码屏幕以及一套非常漂亮的 UI，适用于任何 Flutter 项目。

安装

在您的 Flutter 项目中添加该插件：

flutter pub add phone_auth_otp_ui

开始使用

以下是一个快速示例，展示如何在您的应用中实现该 UI。

示例代码

import 'dart:io';

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:example/firebase_options.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';
import 'package:phone_auth_otp_ui/phone_auth_otp_ui.dart';

const bool USE_EMULATOR = true;

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();

  // 初始化 Firebase
  await Firebase.initializeApp(
    name: 'phone-auth-otp-ui',
    options: DefaultFirebaseOptions.currentPlatform,
  );

  if (USE_EMULATOR) {
    _connectToFirebaseEmulator();
  }

  runApp(const MyApp());
}

Future _connectToFirebaseEmulator() async {
  const fireStorePort = "8080";
  const authPort = "9099";
  final localHost = Platform.isAndroid ? '10.0.2.2' : 'localhost';
  FirebaseFirestore.instance.settings = Settings(
      host: "$localHost:$fireStorePort",
      sslEnabled: false,
      persistenceEnabled: false);
  await FirebaseAuth.instance.useEmulator("http://$localHost:$authPort");
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        fontFamily: "regular",
        primaryColor: Colors.blue, // 替换为您项目的颜色
        backgroundColor: Colors.blue, // 替换为您项目的颜色
        colorScheme: ThemeData()
            .colorScheme
            .copyWith(primary: Colors.blue, secondary: Colors.blue),
      ),
      home: const EditNumberScreen(navScreen: HomeScreen()),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        elevation: 0,
        backgroundColor: Colors.blue, // 替换为您项目的颜色
      ),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(20),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Image.asset(
                'images/success.png',
                fit: BoxFit.cover,
                height: 250,
              ),
              const SizedBox(
                height: 30,
              ),
              const Text(
                '用户认证成功！',
                style: TextStyle(
                  fontSize: 18.0,
                  fontFamily: 'semi-bold',
                ),
                textAlign: TextAlign.center,
              ),
              const SizedBox(
                height: 20,
              ),
              const Padding(
                padding: EdgeInsets.symmetric(horizontal: 16),
                child: Text(
                  '支持我们，请点赞并关注我的社交媒体以获取更多精彩内容！',
                  textAlign: TextAlign.center,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}