Flutter认证UI界面插件auth_ui_flutter的使用

auth_ui_flutter 是一个用于快速构建认证界面的 Flutter 插件。它提供了预构建的 UI 组件，方便开发者快速集成登录、注册、忘记密码等常见的认证流程。以下是 auth_ui_flutter 的基本使用方法：

1. 添加依赖

首先，在 pubspec.yaml 文件中添加 auth_ui_flutter 依赖：

dependencies:
  flutter:
    sdk: flutter
  auth_ui_flutter: ^1.0.0  # 请使用最新版本

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

2. 导入包

在需要使用 auth_ui_flutter 的 Dart 文件中导入包：

import 'package:auth_ui_flutter/auth_ui_flutter.dart';

3. 使用预构建的认证界面

auth_ui_flutter 提供了多种预构建的认证界面，例如登录、注册、忘记密码等。你可以直接使用这些组件。

3.1 登录界面

AuthUiFlutter.signIn(
  onSignIn: (String email, String password) {
    // 处理登录逻辑
    print('Email: $email, Password: $password');
  },
  onSignUp: () {
    // 跳转到注册界面
    Navigator.push(context, MaterialPageRoute(builder: (context) => SignUpScreen()));
  },
  onForgotPassword: () {
    // 跳转到忘记密码界面
    Navigator.push(context, MaterialPageRoute(builder: (context) => ForgotPasswordScreen()));
  },
);

3.2 注册界面

AuthUiFlutter.signUp(
  onSignUp: (String email, String password) {
    // 处理注册逻辑
    print('Email: $email, Password: $password');
  },
  onSignIn: () {
    // 跳转到登录界面
    Navigator.push(context, MaterialPageRoute(builder: (context) => SignInScreen()));
  },
);

3.3 忘记密码界面

AuthUiFlutter.forgotPassword(
  onResetPassword: (String email) {
    // 处理重置密码逻辑
    print('Email: $email');
  },
  onSignIn: () {
    // 跳转到登录界面
    Navigator.push(context, MaterialPageRoute(builder: (context) => SignInScreen()));
  },
);

4. 自定义样式

auth_ui_flutter 允许你自定义界面的样式，例如颜色、字体等。你可以通过传递 AuthUiTheme 对象来定制界面。

AuthUiFlutter.signIn(
  theme: AuthUiTheme(
    primaryColor: Colors.blue,
    accentColor: Colors.blueAccent,
    buttonTextColor: Colors.white,
    // 其他样式配置
  ),
  onSignIn: (String email, String password) {
    // 处理登录逻辑
    print('Email: $email, Password: $password');
  },
);

5. 处理认证逻辑

在实际应用中，你需要将用户输入的数据发送到后端进行验证。可以在 onSignIn、onSignUp、onResetPassword 等回调函数中处理这些逻辑。

6. 完整示例

以下是一个完整的示例，展示了如何使用 auth_ui_flutter 构建一个简单的登录界面：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Auth UI Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: SignInScreen(),
    );
  }
}

class SignInScreen extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Sign In'),
      ),
      body: AuthUiFlutter.signIn(
        onSignIn: (String email, String password) {
          // 处理登录逻辑
          print('Email: $email, Password: $password');
        },
        onSignUp: () {
          // 跳转到注册界面
          Navigator.push(context, MaterialPageRoute(builder: (context) => SignUpScreen()));
        },
        onForgotPassword: () {
          // 跳转到忘记密码界面
          Navigator.push(context, MaterialPageRoute(builder: (context) => ForgotPasswordScreen()));
        },
      ),
    );
  }
}

class SignUpScreen extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Sign Up'),
      ),
      body: AuthUiFlutter.signUp(
        onSignUp: (String email, String password) {
          // 处理注册逻辑
          print('Email: $email, Password: $password');
        },
        onSignIn: () {
          // 跳转到登录界面
          Navigator.pop(context);
        },
      ),
    );
  }
}

class ForgotPasswordScreen extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Forgot Password'),
      ),
      body: AuthUiFlutter.forgotPassword(
        onResetPassword: (String email) {
          // 处理重置密码逻辑
          print('Email: $email');
        },
        onSignIn: () {
          // 跳转到登录界面
          Navigator.pop(context);
        },
      ),
    );
  }
}