devaloop_login_page 是一个用于 Flutter 的登录页面插件，它可以帮助开发者快速构建一个美观且功能齐全的登录页面。以下是如何使用 devaloop_login_page 插件的步骤：

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 devaloop_login_page 插件的依赖。

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

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

2. 导入插件

在你的 Dart 文件中导入 devaloop_login_page 插件。

import 'package:devaloop_login_page/devaloop_login_page.dart';

3. 使用 LoginPage 组件

你可以直接在 MaterialApp 或 CupertinoApp 中使用 LoginPage 组件。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Login Page',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: LoginPage(
        onLogin: (String email, String password) {
          // 处理登录逻辑
          print('Email: $email, Password: $password');
        },
        onForgotPassword: () {
          // 处理忘记密码逻辑
          print('Forgot Password clicked');
        },
        onSignUp: () {
          // 处理注册逻辑
          print('Sign Up clicked');
        },
      ),
    );
  }
}

4. 自定义登录页面

LoginPage 组件提供了一些可选的参数，允许你自定义登录页面的外观和行为。

LoginPage(
  onLogin: (String email, String password) {
    // 处理登录逻辑
    print('Email: $email, Password: $password');
  },
  onForgotPassword: () {
    // 处理忘记密码逻辑
    print('Forgot Password clicked');
  },
  onSignUp: () {
    // 处理注册逻辑
    print('Sign Up clicked');
  },
  logo: FlutterLogo(size: 100), // 自定义 Logo
  backgroundColor: Colors.white, // 背景颜色
  buttonColor: Colors.blue, // 按钮颜色
  textColor: Colors.black, // 文本颜色
  hintTextColor: Colors.grey, // 提示文本颜色
  errorTextColor: Colors.red, // 错误文本颜色
  emailHint: 'Enter your email', // 邮箱输入框提示
  passwordHint: 'Enter your password', // 密码输入框提示
  loginButtonText: 'Login', // 登录按钮文本
  forgotPasswordText: 'Forgot Password?', // 忘记密码文本
  signUpText: 'Sign Up', // 注册文本
)

5. 处理登录逻辑

在 onLogin 回调中，你可以处理用户的登录逻辑。例如，你可以验证用户的凭据，然后导航到主页面。

onLogin: (String email, String password) async {
  // 模拟登录逻辑
  if (email == 'user@example.com' && password == 'password') {
    // 登录成功，导航到主页面
    Navigator.pushReplacement(
      context,
      MaterialPageRoute(builder: (context) => HomePage()),
    );
  } else {
    // 登录失败，显示错误消息
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(content: Text('Invalid email or password')),
    );
  }
},

6. 处理忘记密码和注册逻辑

你可以在 onForgotPassword 和 onSignUp 回调中处理忘记密码和注册的逻辑。

onForgotPassword: () {
  // 导航到忘记密码页面
  Navigator.push(
    context,
    MaterialPageRoute(builder: (context) => ForgotPasswordPage()),
  );
},
onSignUp: () {
  // 导航到注册页面
  Navigator.push(
    context,
    MaterialPageRoute(builder: (context) => SignUpPage()),
  );
},

7. 运行应用

现在你可以运行你的 Flutter 应用，并查看 devaloop_login_page 插件的效果。

flutter run