sign_with_btn 1.1.0

A beautiful Flutter package for creating customizable sign-in buttons with support for Google, Apple, Facebook, Email, and Phone authentication providers.

Sign With Button

A beautiful and customizable Flutter package for creating sign-in buttons with support for popular authentication providers including Google, Apple, Facebook, Email, and Phone.

✨ Features

• 🎨 Beautiful Design: Pre-styled buttons with modern UI
• 🔧 Highly Customizable: Extensive styling options with outline and filled variants
• 📱 Multiple Providers: Support for Google, Apple, Facebook, Email, and Phone authentication
• 🎯 Flexible Layout: Configurable grid layout with customizable rows and spacing
• 🎭 Display Modes: Show icons only, text only, or both
• 🚀 Easy Integration: Simple API that works with any authentication flow
• 📦 Lightweight: Minimal dependencies with FontAwesome icons
• 🎪 Extensible: Create custom providers by extending the base class

📸 Preview

Default Style

Outline Style

Filled Style

🚀 Getting Started

Installation

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

dependencies:
  sign_with_btn: ^1.0.0

Then run:

flutter pub get

Import

import 'package:sign_with_btn/sign_with_btn.dart';

📖 Usage

Basic Example

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

class LoginScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Padding(
          padding: EdgeInsets.all(20),
          child: SignWithBtn(
            signTypes: [
              SignWithGoogle(),
              SignWithApple(),
              SignWithFacebook(),
              SignWithEmail(),
            ],
            onSign: (signType) {
              // Handle sign-in logic
              print('Signing in with ${signType.title}');
            },
          ),
        ),
      ),
    );
  }
}

Advanced Styling

SignWithBtn(
  signTypes: [
    SignWithGoogle(
      style: SignWithStyle.outline(color: Colors.red),
    ),
    SignWithApple(
      style: SignWithStyle.filled(background: Colors.black),
    ),
    SignWithFacebook(
      style: SignWithStyle.filled(background: Color(0xFF1877F2)),
    ),
    SignWithEmail(
      style: SignWithStyle.outline(color: Colors.grey),
    ),
  ],
  countInRow: 2,
  height: 55,
  spaceBetween: 15,
  onSign: (signType) {
    if (signType is SignWithGoogle) {
      _handleGoogleSignIn();
    } else if (signType is SignWithApple) {
      _handleAppleSignIn();
    } else if (signType is SignWithFacebook) {
      _handleFacebookSignIn();
    } else if (signType is SignWithEmail) {
      _handleEmailSignIn();
    }
  },
)

Custom Layout and Styling

// Icon-only buttons in a single row
SignWithBtn(
  signTypes: [
    SignWithGoogle(),
    SignWithApple(),
    SignWithFacebook(),
    SignWithPhone(),
  ],
  countInRow: 4,
  style: SignWithStyle(
    styleType: StyleType.icon,
    buttonStyle: ButtonStyle(
      backgroundColor: WidgetStatePropertyAll(Colors.grey[100]),
      shape: WidgetStatePropertyAll(CircleBorder()),
    ),
  ),
  height: 60,
  onSign: (signType) => _handleSignIn(signType),
)

Global vs Individual Styling

SignWithBtn(
  // Global style applied to all buttons
  style: SignWithStyle.outline(color: Colors.blue),
  signTypes: [
    SignWithGoogle(), // Uses global style
    SignWithApple(
      // Individual style overrides global style
      style: SignWithStyle.filled(background: Colors.black),
    ),
    SignWithFacebook(), // Uses global style
  ],
  onSign: (signType) => _handleSignIn(signType),
)

🎨 Styling Options

SignWithStyle

The SignWithStyle class provides three ways to style your buttons:

1. Default Style

SignWithStyle() // Default Flutter button style with both icon and text

2. Outline Style

SignWithStyle.outline(
  color: Colors.blue,        // Border and text color
  style: StyleType.both,     // Display mode
  radius: 10,                // Border radius
)

3. Filled Style

SignWithStyle.filled(
  background: Colors.red,    // Background color
  foreground: Colors.white,  // Text and icon color
  style: StyleType.both,     // Display mode
  radius: 10,                // Border radius
)

4. Elevated Style

SignWithStyle.elevated(
  background: Colors.white,     // Background color
  foreground: Colors.black87,   // Text and icon color
  elevation: 6.0,               // Shadow depth
  radius: 12,                   // Border radius
)

5. Pill Style

SignWithStyle.pill(
  background: Colors.blue,      // Background color
  foreground: Colors.white,     // Text and icon color
)

6. Minimal Style

SignWithStyle.minimal(
  color: Colors.grey[600]!,     // Color for text and hover effects
  style: StyleType.both,        // Display mode
)

7. Neumorphic Style

SignWithStyle.neumorphic(
  baseColor: Colors.grey[200]!, // Base color for the effect
  isPressed: false,             // Pressed (inset) or raised (outset)
  radius: 20,                   // Border radius
)

8. Gradient Style

SignWithStyle.gradient(
  gradient: LinearGradient(
    colors: [Colors.blue, Colors.purple],
  ),
  foreground: Colors.white,     // Text and icon color
)

9. Brand-Specific Styles

Official brand styling that follows each platform's design guidelines:

// Google's official style
SignWithGoogle(style: SignWithStyle.google())

// Apple's official style
SignWithApple(style: SignWithStyle.apple())

// Facebook's official style
SignWithFacebook(style: SignWithStyle.facebook())

// Twitter's official style
SignWithTwitter(style: SignWithStyle.twitter())

// GitHub's official style
SignWithGitHub(style: SignWithStyle.github())

// LinkedIn's official style
SignWithLinkedIn(style: SignWithStyle.linkedin())

// Microsoft's official style
SignWithMicrosoft(style: SignWithStyle.microsoft())

// Discord's official style
SignWithDiscord(style: SignWithStyle.discord())

// Slack's official style
SignWithSlack(style: SignWithStyle.slack())

// Spotify's official style
SignWithSpotify(style: SignWithStyle.spotify())

// Instagram's official style
SignWithInstagram(style: SignWithStyle.instagram())

// TikTok's official style
SignWithTikTok(style: SignWithStyle.tiktok())

// Twitch's official style
SignWithTwitch(style: SignWithStyle.twitch())

// Reddit's official style
SignWithReddit(style: SignWithStyle.reddit())

10. Custom Style

SignWithStyle(
  buttonStyle: ButtonStyle(
    backgroundColor: WidgetStatePropertyAll(Colors.purple),
    foregroundColor: WidgetStatePropertyAll(Colors.white),
    elevation: WidgetStatePropertyAll(4),
    shape: WidgetStatePropertyAll(
      RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(20),
      ),
    ),
  ),
  styleType: StyleType.both,
)

StyleType Options

• StyleType.both - Show both icon and text (default)
• StyleType.icon - Show only the icon
• StyleType.text - Show only the text

🔧 Available Providers

Core Providers

Provider	Class	Icon	Default Title
Google	SignWithGoogle()	Google logo	"Google"
Apple	SignWithApple()	Apple logo	"Apple"
Facebook	SignWithFacebook()	Facebook logo	"Facebook"
Email	SignWithEmail()	Envelope	"Email"
Phone	SignWithPhone()	Phone	"Phone"

Social Media Providers

Provider	Class	Icon	Default Title
Twitter	SignWithTwitter()	Twitter logo	"Twitter"
Instagram	SignWithInstagram()	Instagram logo	"Instagram"
TikTok	SignWithTikTok()	TikTok logo	"TikTok"
Reddit	SignWithReddit()	Reddit logo	"Reddit"

Professional Providers

Provider	Class	Icon	Default Title
LinkedIn	SignWithLinkedIn()	LinkedIn logo	"LinkedIn"
Microsoft	SignWithMicrosoft()	Microsoft logo	"Microsoft"
GitHub	SignWithGitHub()	GitHub logo	"GitHub"
Slack	SignWithSlack()	Slack logo	"Slack"

Gaming & Entertainment

Provider	Class	Icon	Default Title
Discord	SignWithDiscord()	Discord logo	"Discord"
Twitch	SignWithTwitch()	Twitch logo	"Twitch"
Spotify	SignWithSpotify()	Spotify logo	"Spotify"

🛠️ Creating Custom Providers

You can create custom sign-in providers by extending the SignWithType class:

class SignWithTwitter extends SignWithType {
  const SignWithTwitter({
    super.title = "Twitter",
    super.icon = const FaIcon(FontAwesomeIcons.twitter),
    super.style,
  });
}

// Usage
SignWithBtn(
  signTypes: [
    SignWithGoogle(),
    SignWithTwitter(), // Your custom provider
  ],
  onSign: (signType) {
    if (signType is SignWithTwitter) {
      _handleTwitterSignIn();
    }
  },
)

📋 API Reference

SignWithBtn

Property	Type	Default	Description
signTypes	List<SignWithType>	required	List of sign-in providers to display
onSign	Function(SignWithType)?	null	Callback when a button is pressed
countInRow	int	2	Number of buttons per row
style	SignWithStyle	SignWithStyle()	Global styling for all buttons
height	double	50	Height of each button
spaceBetween	double	10	Spacing between buttons

SignWithStyle

Property	Type	Default	Description
buttonStyle	ButtonStyle	ButtonStyle()	Flutter ButtonStyle configuration
styleType	StyleType	StyleType.both	Content display mode

🤝 Integration Examples

With Firebase Auth

void _handleGoogleSignIn() async {
  try {
    final GoogleSignInAccount? googleUser = await GoogleSignIn().signIn();
    final GoogleSignInAuthentication? googleAuth =
        await googleUser?.authentication;

    final credential = GoogleAuthProvider.credential(
      accessToken: googleAuth?.accessToken,
      idToken: googleAuth?.idToken,
    );

    await FirebaseAuth.instance.signInWithCredential(credential);
  } catch (e) {
    print('Google Sign-In Error: $e');
  }
}

With Custom Authentication

void _handleEmailSignIn() {
  Navigator.push(
    context,
    MaterialPageRoute(
      builder: (context) => EmailLoginScreen(),
    ),
  );
}

void _handlePhoneSignIn() {
  Navigator.push(
    context,
    MaterialPageRoute(
      builder: (context) => PhoneVerificationScreen(),
    ),
  );
}

🎯 Best Practices

1. Brand Compliance: Use official brand styles for authentic appearance

   // ✅ Good - Uses official Google styling
   SignWithGoogle(style: SignWithStyle.google())
   
   // ❌ Avoid - Custom colors that don't match brand guidelines
   SignWithGoogle(style: SignWithStyle.filled(background: Colors.purple))
   

2. Consistent Styling: Use a consistent approach across all providers

3. Provider Priority: Place the most commonly used providers first

4. Responsive Design: Test different screen sizes and orientations

5. Accessibility: Ensure buttons have proper semantic labels

6. Error Handling: Always handle authentication errors gracefully

🏢 Brand Guidelines Compliance

This package includes official brand styling for major authentication providers:

• Google: Follows Google Sign-In branding guidelines
• Apple: Complies with Apple's Human Interface Guidelines
• Facebook: Uses Facebook's official brand colors and styling
• Twitter: Matches Twitter's current brand identity
• GitHub: Follows GitHub's design system
• LinkedIn: Uses LinkedIn's professional brand styling
• Microsoft: Complies with Microsoft's design language
• Discord: Matches Discord's gaming-focused brand
• Slack: Uses Slack's workspace-oriented styling
• Spotify: Follows Spotify's music platform branding
• Instagram: Uses Instagram's social media styling
• TikTok: Matches TikTok's modern social platform design
• Twitch: Follows Twitch's streaming platform branding
• Reddit: Uses Reddit's community-focused styling

All brand styles include authentic colors, border radius, and visual elements that match each platform's official design guidelines.

📱 Platform Support

• ✅ Android
• ✅ iOS
• ✅ Web
• ✅ macOS
• ✅ Windows
• ✅ Linux

🐛 Issues and Feedback

If you encounter any issues or have suggestions for improvements, please file an issue on our GitHub repository.

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request. For major changes, please open an issue first to discuss what you would like to change.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📄 License

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

👨‍💻 Author

Mohamed Maher - GitHub

• 📧 Email: [e-mail]
• 💼 LinkedIn: Mohamed Maher
• 🌍 Portfolio: mohamedmaher.dev

⭐ Show Your Support

If this package helped you, please give it a ⭐ on GitHub and a 👍 on pub.dev!

---

Made with ❤️ by Mohamed Maher