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 #

Social Media Providers #

Professional Providers #

Gaming & Entertainment #

🛠️ 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 #

SignWithStyle #

🤝 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: 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