Flutter身份验证插件main_auth的使用

main_auth 是一个提供可定制登录和注册界面的Flutter插件。它支持轻松集成登录表单、社交登录按钮，并允许自定义标题、样式和布局。

目录

• 功能
• 安装
• 本地化
• 登录构造参数
  • 示例用法：登录
• 注册构造参数
  • 示例用法：注册
• 贡献

功能

• LoginScreen: 可定制的登录界面，具有可配置的顶部、中部和底部部分。
• SignUpScreen: 可定制的注册界面，支持额外字段如电话号码和确认密码。
• 社交登录集成: 提供Google、Apple、Facebook和Twitter（X）的社交登录按钮。
• 可定制样式: 可应用自定义按钮样式、标题和布局配置。
• 回调支持: 处理登录、注册和社交登录按钮点击事件的回调。

安装

在您的 pubspec.yaml 文件中添加以下内容：

dependencies:
  main_auth: <latest_version>

本地化

要在工厂构造函数中启用验证消息的本地化，请将 ValidationLocalizations.delegate 添加到应用程序的委托列表中：

MaterialApp(
  localizationsDelegates: [
    ValidationLocalizations.delegate,
    AuthLocalizations.delegate,
    // 其他委托...
  ],
  // 其他应用程序配置...
)

登录构造参数

示例用法：登录

LoginScreen(
  title: 'Welcome Back',
  image: Image.asset('assets/logo.png'),
  hideAppBar: true,
  onLoginPressed: (email, password) {
    // 处理登录操作
  },
  hideTopLogin: false,
  hideMiddleLogin: false,
  hideBottomLogin: false,
  buttonSocialType: ButtonSocialType.google,
  buttonStyle: ButtonDecoration.rounded,
)

注册构造参数

示例用法：注册

SignUpScreen(
  title: 'Create Your Account',
  image: Image.asset('assets/logo.png'),
  hideAppBar: true,
  onSignUpPressed: (email, password, {phone, confirmPassword}) {
    // 处理注册逻辑
  },
  onTapGoogle: () {
    // 处理Google注册
  },
  onTapFacebook: () {
    // 处理Facebook注册
  },
  hideConfirmPasswordField: false,
  hidePhoneField: true, // 隐藏电话号码字段
  buttonSocialType: ButtonSocialType.google,
  buttonStyle: ButtonDecoration.rounded,
)

贡献

欢迎对该项目进行贡献。

如果您发现了一个bug或者想要一个新功能但不知道如何修复/实现，请提交一个issue。
如果您修复了一个bug或实现了新功能，请发送一个pull request。

示例代码

以下是完整的示例代码，展示了如何使用main_auth插件创建一个简单的登录和注册页面。

import 'dart:developer';

import 'package:flutter/material.dart';
import 'package:main_auth/main_auth.dart';
import 'package:main_widgets/main_widgets.dart';
import 'package:smart_localize/smart_localize.dart';

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

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

  @override
  Widget build(BuildContext context) {
    MainWidgetsUtil.init(context,
        designSize: const Size(375, 812), minTextAdapt: true);
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      supportedLocales: const [
        Locale('en'),
        Locale('ar'),
      ],
      locale: const Locale('en'),
      localeResolutionCallback: (locale, supportedLocales) =>
          locale ?? const Locale('en'),
      localizationsDelegates: context.smartLocalizeDelegates,
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

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

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Center(
              child: LoginScreen(
                title: 'Welcome Back',
                image: Image.asset('assets/logo.png'),
                hideAppBar: true,
                onLoginPressed: (email, password) {
                  log('Email: $email, Password: $password');
                },
                buttonSocialType: ButtonSocialType.google,
                buttonStyle: ButtonDecoration.rounded,
              ),
            ),
            SizedBox(height: 20),
            Center(
              child: SignUpScreen(
                title: 'Create Your Account',
                image: Image.asset('assets/logo.png'),
                hideAppBar: true,
                onSignUpPressed: (email, password, {phone, confirmPassword}) {
                  log('Email: $email, Password: $password');
                },
                onTapGoogle: () {
                  log('Google Sign Up');
                },
                onTapFacebook: () {
                  log('Facebook Sign Up');
                },
                hideConfirmPasswordField: false,
                hidePhoneField: true,
                buttonSocialType: ButtonSocialType.google,
                buttonStyle: ButtonDecoration.rounded,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

此示例展示了如何使用main_auth插件来创建登录和注册界面，并处理用户输入和社交登录按钮点击事件。您可以根据需要进一步自定义这些界面和功能。