Flutter简化登录界面插件easy_login_widget的使用

本README描述了该软件包。如果您将此软件包发布到pub.dev，则此README的内容将出现在您的软件包的首页。

有关如何编写好的软件包README的信息，请参阅撰写软件包页面指南。

有关开发软件包的一般信息，请参阅Dart指南中的创建软件包指南和Flutter指南中的开发软件包和插件指南。

特性

通过此软件包，您可以使用几行代码为您的Flutter项目添加一个简单的登录屏幕。

开始使用

要使用此软件包，您需要将其安装并导入到您的项目中。完成此步骤后，您就可以调用软件包中的EasyLoginWidget，并根据需要自定义它。

安装依赖

在pubspec.yaml文件中添加以下依赖项：

dependencies:
  easy_login_widget: ^1.4.0

导入软件包

在您的项目中导入软件包：

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

使用EasyLoginWidget

下面是一个完整的示例，展示了如何在Flutter项目中使用EasyLoginWidget。

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Easy Login Widget',
      home: MyHomePage(),
    );
  }
}

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

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  // 控制器用于管理用户名和密码输入框的值
  final TextEditingController userNameController = TextEditingController();
  final TextEditingController passwordController = TextEditingController();
  
  // 表单状态全局键，用于验证表单
  final GlobalKey<FormState> formKey = GlobalKey<FormState>();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: EasyLoginWidget(
          // 表单状态全局键
          formKey: formKey,
          
          // 用户名控制器
          userNameController: userNameController,
          
          // 密码控制器
          passwordController: passwordController,
          
          // 按钮点击事件处理函数
          onPressed: () {
            if (formKey.currentState?.validate() ?? false) {
              print('Username: ${userNameController.text}');
            }
          },
          
          // 设置按钮是否位于最前或最后
          buttonWidgetFirstOrLast: true,
          
          // 用户名验证逻辑
          userNameValidator: (value) =>
            value == null || value.isEmpty ? 'Required' : null,
          
          // 密码验证逻辑
          passwordValidator: (value) =>
            value == null || value.isEmpty ? 'Required' : null,
          
          // 忘记密码组件的可见性
          forgotPasswordWidgetVisibility: true,
          
          // 忘记密码文本
          forgotPasswordText: 'Forgot password',
          
          // 输入框之间的间距
          inputSpacing: 10,
        ),
      ),
    );
  }
}