Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/mohamedmaher-dev/sign_with_btn

A beautiful Flutter package for creating customizable sign-in buttons with support for Google, Apple, Facebook, Email, and Phone authentication providers.
https://github.com/mohamedmaher-dev/sign_with_btn

authentication button-library custom-ui dart flutter flutter-auth flutter-package flutter-widgets login-buttons mobile-auth oauth-ui signin-button social-login ui-library

Last synced: 15 days ago
JSON representation

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

Awesome Lists containing this project

README 

          
# Sign With Button



[![pub package](https://img.shields.io/pub/v/sign_with_btn.svg)](https://pub.dev/packages/sign_with_btn)

[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)

[![Flutter](https://img.shields.io/badge/Flutter-%2302569B.svg?style=flat&logo=Flutter&logoColor=white)](https://flutter.dev)



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



## 📋 Table of Contents



- [✨ Features](#-features)

- [📸 Preview](#-preview)

- [🚀 Installation](#-installation)

- [📱 Basic Usage](#-basic-usage)

- [🎨 Styling Options](#-styling-options)

- [🔧 Available Providers](#-available-providers)

  - [Core Providers](#core-providers)

  - [Social Media Providers](#social-media-providers)

  - [Professional Providers](#professional-providers)

  - [Gaming & Entertainment](#gaming--entertainment)

- [🛠️ Creating Custom Providers](#️-creating-custom-providers)

- [⚙️ Advanced Configuration](#️-advanced-configuration)

- [🎯 Best Practices](#-best-practices)

- [🏢 Brand Guidelines Compliance](#-brand-guidelines-compliance)

- [📱 Platform Support](#-platform-support)

- [🤝 Contributing](#-contributing)

- [📄 License](#-license)



## ✨ 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

      


      Default Style

    

    

      Outline Style

      


      Outline Style

    

    

      Filled Style

      


      Filled Style

    

  



## 🚀 Getting Started



### Installation



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



```yaml

dependencies:

  sign_with_btn: ^1.0.0

```



Then run:



```bash

flutter pub get

```



### Import



```dart

import 'package:sign_with_btn/sign_with_btn.dart';

```



## 📖 Usage



### Basic Example



```dart

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



```dart

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



```dart

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



```dart

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



```dart

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

```



#### 2. Outline Style



```dart

SignWithStyle.outline(

  color: Colors.blue,        // Border and text color

  style: StyleType.both,     // Display mode

  radius: 10,                // Border radius

)

```



#### 3. Filled Style



```dart

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



```dart

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



```dart

SignWithStyle.pill(

  background: Colors.blue,      // Background color

  foreground: Colors.white,     // Text and icon color

)

```



#### 6. Minimal Style



```dart

SignWithStyle.minimal(

  color: Colors.grey[600]!,     // Color for text and hover effects

  style: StyleType.both,        // Display mode

)

```



#### 7. Neumorphic Style



```dart

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



```dart

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:



```dart

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



```dart

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:



```dart

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



```dart

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



```dart

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



   ```dart

   // ✅ 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](https://github.com/mohamedmaher-dev/sign_with_btn/issues).



## 🤝 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](LICENSE) file for details.



## 👨‍💻 Author



**Mohamed Maher** - [GitHub](https://github.com/mohamedmaher-dev)



- 📧 Email: mohamedmaher.personal@gmail.com

- 💼 LinkedIn: [Mohamed Maher](https://linkedin.com/in/mohamedmaher-dev)

- 🌍 Portfolio: [mohamedmaher.dev](https://mohamedmaher.dev)



## ⭐ Show Your Support



If this package helped you, please give it a ⭐ on [GitHub](https://github.com/mohamedmaher-dev/sign_with_btn) and a 👍 on [pub.dev](https://pub.dev/packages/sign_with_btn)!



---



Made with ❤️ by [Mohamed Maher](https://github.com/mohamedmaher-dev)