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"

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

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))

Consistent Styling: Use a consistent approach across all providers
Provider Priority: Place the most commonly used providers first
Responsive Design: Test different screen sizes and orientations
Accessibility: Ensure buttons have proper semantic labels
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.

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

📄 License

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

👨‍💻 Author

Mohamed Maher - GitHub

📧 Email: mohamedmaher.personal@gmail.com
💼 LinkedIn: Mohamed Maher
🌍 Portfolio: mohamedmaher.dev

⭐ Show Your Support

If this package helped you, please give it a ⭐ on GitHub and a 👍 on pub.flutter-io.cn!

Made with ❤️ by Mohamed Maher

Sign With Button

✨ Features

📸 Preview

🚀 Getting Started

Installation

Import

📖 Usage

Basic Example

Advanced Styling

Custom Layout and Styling

Global vs Individual Styling

🎨 Styling Options

SignWithStyle

1. Default Style

2. Outline Style

3. Filled Style

4. Elevated Style

5. Pill Style

6. Minimal Style

7. Neumorphic Style

8. Gradient Style

9. Brand-Specific Styles

10. Custom Style

StyleType Options

🔧 Available Providers

Core Providers

Social Media Providers

Professional Providers

Gaming & Entertainment

🛠️ Creating Custom Providers

📋 API Reference

SignWithBtn

SignWithStyle

🤝 Integration Examples

With Firebase Auth

With Custom Authentication

🎯 Best Practices

🏢 Brand Guidelines Compliance

📱 Platform Support

🐛 Issues and Feedback

🤝 Contributing

📄 License

👨‍💻 Author

⭐ Show Your Support

Libraries

sign_with_btn package