Flutter Auth UI Kit 🔐

A comprehensive Flutter package for authentication UI components including signin forms, social login buttons, dividers, and remember me functionality.

Features ✨

• 🔐 Complete Signin Form: Ready-to-use signin form with email/password fields
• 👥 Social Login: Facebook, Google, and Apple login buttons
• ✅ Remember Me: Checkbox with forgot password functionality
• 📱 Platform Adaptive: Automatically adapts to iOS and Android design patterns
• 🎨 Highly Customizable: Colors, spacing, sizing, and styling options
• ♿ Accessibility Ready: Proper semantic structure and screen reader support
• 🌍 Localization Ready: All text is customizable for different languages
• ⚡ Performance Optimized: Lightweight and efficient widgets

Installation 📦

Add this to your package's pubspec.yaml file:

dependencies:
  flutter_auth_ui_kit: ^1.0.0

Then run:

flutter pub get

Usage 🚀

Basic Signin Form

import 'package:flutter_auth_ui_kit/flutter_auth_ui_kit.dart';

SigninForm(
  onSignin: (email, password, rememberMe) {
    // Handle signin logic
    print('Email: $email, Password: $password, Remember: $rememberMe');
  },
  onForgotPassword: () {
    // Handle forgot password
    print('Forgot password tapped');
  },
  onSocialLogin: (provider) {
    // Handle social login
    print('Social login: $provider');
  },
  isLoading: false,
  emailHint: 'Enter your email',
  passwordHint: 'Enter your password',
  signinButtonText: 'Sign In',
)

Social Login Buttons

ThirdPartyAuth(
  facebookIcon: 'assets/icons/facebook.svg',
  googleIcon: 'assets/icons/google.svg',
  appleIcon: 'assets/icons/apple.svg',
  facebookOnTap: () => _handleFacebookLogin(),
  googleOnTap: () => _handleGoogleLogin(),
  appleOnTap: () => _handleAppleLogin(),
  iconSize: 40.0,
  spacing: 24.0,
)

Individual Social Button

SocialAuthButton(
  provider: 'google',
  text: 'Continue with Google',
  icon: 'assets/icons/google.svg',
  onPressed: () => _handleGoogleLogin(),
  backgroundColor: Colors.white,
  textColor: Colors.black,
  borderColor: Colors.grey,
)

Remember Me with Forgot Password

RememberPassword(
  rememberMeText: 'Remember me',
  forgotPasswordText: 'Forgot password?',
  onRememberMeChanged: (value) => setState(() => _rememberMe = value),
  onForgotPasswordTap: () => _showForgotPasswordDialog(),
  checkboxColor: Colors.blue,
  textColor: Colors.grey,
)

Auth Divider

AuthDivider(
  text: 'OR',
  textStyle: TextStyle(color: Colors.grey),
  dividerColor: Colors.grey.shade300,
  spacing: 16.0,
)

Customization 🎨

Colors and Theming

SigninForm(
  primaryColor: Colors.blue,
  errorColor: Colors.red,
  backgroundColor: Colors.white,
  borderRadius: 16.0,
  // ... other properties
)

Spacing and Layout

SigninForm(
  padding: EdgeInsets.all(24.0),
  fieldSpacing: 24.0,
  buttonSpacing: 20.0,
  socialSpacing: 32.0,
  // ... other properties
)

Field Configuration

SigninForm(
  emailInputType: TextInputType.emailAddress,
  passwordInputType: TextInputType.visiblePassword,
  obscurePassword: true,
  fieldHeight: 60.0,
  buttonHeight: 50.0,
  // ... other properties
)

Widgets 📱

SigninForm

Complete signin form with email/password fields, validation, and social login options.

ThirdPartyAuth

Row of social authentication buttons (Facebook, Google, Apple).

SocialAuthButton

Individual social authentication button with customizable styling.

RememberPassword

Remember me checkbox with forgot password link.

AuthDivider

Horizontal divider with text in the center.

Dependencies 📋

• flutter: SDK
• flutter_platform_widgets: Platform-adaptive widgets
• flutter_svg: SVG icon support

Contributing 🤝

Contributions are welcome! Please feel free to submit a Pull Request.

License 📄

This project is licensed under the MIT License - see the LICENSE file for details.

Support 💬

If you encounter any problems or have suggestions, please file an issue at the GitHub repository.

---

Made with ❤️ by seifmoustafa