flutter_ui_auth 是一个用于快速实现用户认证界面的 Flutter 插件。它提供了预构建的 UI 组件，使得开发者可以轻松集成登录、注册、忘记密码等功能。以下是如何使用 flutter_ui_auth 插件的步骤：

1. 添加依赖

首先，在 pubspec.yaml 文件中添加 flutter_ui_auth 插件的依赖：

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

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

2. 导入包

在你的 Dart 文件中导入 flutter_ui_auth 包：

import 'package:flutter_ui_auth/flutter_ui_auth.dart';

3. 使用预构建的 UI 组件

flutter_ui_auth 提供了多个预构建的 UI 组件，你可以直接使用它们来实现用户认证功能。

3.1 登录界面

使用 LoginScreen 组件来创建一个登录界面：

class LoginPage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Login'),
      ),
      body: LoginScreen(
        onLogin: (String email, String password) {
          // 处理登录逻辑
          print('Login with email: $email and password: $password');
        },
        onForgotPassword: () {
          // 导航到忘记密码页面
          Navigator.push(
            context,
            MaterialPageRoute(builder: (context) => ForgotPasswordPage()),
          );
        },
        onSignUp: () {
          // 导航到注册页面
          Navigator.push(
            context,
            MaterialPageRoute(builder: (context) => SignUpPage()),
          );
        },
      ),
    );
  }
}

3.2 注册界面

使用 SignUpScreen 组件来创建一个注册界面：

class SignUpPage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Sign Up'),
      ),
      body: SignUpScreen(
        onSignUp: (String email, String password) {
          // 处理注册逻辑
          print('Sign up with email: $email and password: $password');
        },
        onLogin: () {
          // 导航到登录页面
          Navigator.pop(context);
        },
      ),
    );
  }
}

3.3 忘记密码界面

使用 ForgotPasswordScreen 组件来创建一个忘记密码界面：

class ForgotPasswordPage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Forgot Password'),
      ),
      body: ForgotPasswordScreen(
        onResetPassword: (String email) {
          // 处理重置密码逻辑
          print('Reset password for email: $email');
        },
        onLogin: () {
          // 导航到登录页面
          Navigator.pop(context);
        },
      ),
    );
  }
}

4. 自定义样式

flutter_ui_auth 允许你通过传递 ThemeData 或自定义 Widget 来调整界面样式。例如：

LoginScreen(
  onLogin: (String email, String password) {
    // 处理登录逻辑
  },
  theme: ThemeData(
    primaryColor: Colors.blue,
    accentColor: Colors.blueAccent,
  ),
  logo: FlutterLogo(),
)

5. 处理认证逻辑

你需要根据你的后端服务来实现实际的认证逻辑。例如，你可以使用 Firebase、Supabase 或其他认证服务来处理用户的登录、注册和密码重置。

6. 导航和状态管理

根据你的应用需求，你可能需要使用状态管理工具（如 Provider、Riverpod、Bloc 等）来管理用户的认证状态，并在用户成功登录后导航到主页面。

7. 完整的示例

以下是一个完整的示例，展示了如何使用 flutter_ui_auth 插件实现用户认证流程：

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

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

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

class LoginPage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Login'),
      ),
      body: LoginScreen(
        onLogin: (String email, String password) {
          // 处理登录逻辑
          print('Login with email: $email and password: $password');
        },
        onForgotPassword: () {
          // 导航到忘记密码页面
          Navigator.push(
            context,
            MaterialPageRoute(builder: (context) => ForgotPasswordPage()),
          );
        },
        onSignUp: () {
          // 导航到注册页面
          Navigator.push(
            context,
            MaterialPageRoute(builder: (context) => SignUpPage()),
          );
        },
      ),
    );
  }
}

class SignUpPage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Sign Up'),
      ),
      body: SignUpScreen(
        onSignUp: (String email, String password) {
          // 处理注册逻辑
          print('Sign up with email: $email and password: $password');
        },
        onLogin: () {
          // 导航到登录页面
          Navigator.pop(context);
        },
      ),
    );
  }
}

class ForgotPasswordPage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Forgot Password'),
      ),
      body: ForgotPasswordScreen(
        onResetPassword: (String email) {
          // 处理重置密码逻辑
          print('Reset password for email: $email');
        },
        onLogin: () {
          // 导航到登录页面
          Navigator.pop(context);
        },
      ),
    );
  }
}