{"id":32270614,"url":"https://github.com/mohamedmaher-dev/sign_with_btn","last_synced_at":"2026-05-17T04:36:09.148Z","repository":{"id":317902562,"uuid":"1069308746","full_name":"mohamedmaher-dev/sign_with_btn","owner":"mohamedmaher-dev","description":"A beautiful Flutter package for creating customizable sign-in buttons with support for Google, Apple, Facebook, Email, and Phone authentication providers.","archived":false,"fork":false,"pushed_at":"2025-10-03T18:53:12.000Z","size":523,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-10-22T22:39:51.890Z","etag":null,"topics":["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"],"latest_commit_sha":null,"homepage":"","language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mohamedmaher-dev.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-10-03T18:15:53.000Z","updated_at":"2025-10-03T18:53:15.000Z","dependencies_parsed_at":"2025-10-03T20:22:37.237Z","dependency_job_id":"e47fe083-c201-4956-b35f-55199bf962b6","html_url":"https://github.com/mohamedmaher-dev/sign_with_btn","commit_stats":null,"previous_names":["mohamedmaher-dev/sign_with_btn"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/mohamedmaher-dev/sign_with_btn","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mohamedmaher-dev%2Fsign_with_btn","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mohamedmaher-dev%2Fsign_with_btn/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mohamedmaher-dev%2Fsign_with_btn/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mohamedmaher-dev%2Fsign_with_btn/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mohamedmaher-dev","download_url":"https://codeload.github.com/mohamedmaher-dev/sign_with_btn/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mohamedmaher-dev%2Fsign_with_btn/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":280528607,"owners_count":26345642,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-22T02:00:06.515Z","response_time":63,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["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"],"created_at":"2025-10-22T22:40:17.413Z","updated_at":"2025-10-22T22:40:19.758Z","avatar_url":"https://github.com/mohamedmaher-dev.png","language":"Dart","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Sign With Button\n\n[![pub package](https://img.shields.io/pub/v/sign_with_btn.svg)](https://pub.dev/packages/sign_with_btn)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n[![Flutter](https://img.shields.io/badge/Flutter-%2302569B.svg?style=flat\u0026logo=Flutter\u0026logoColor=white)](https://flutter.dev)\n\nA beautiful and customizable Flutter package for creating sign-in buttons with support for popular authentication providers including Google, Apple, Facebook, Email, and Phone.\n\n## 📋 Table of Contents\n\n- [✨ Features](#-features)\n- [📸 Preview](#-preview)\n- [🚀 Installation](#-installation)\n- [📱 Basic Usage](#-basic-usage)\n- [🎨 Styling Options](#-styling-options)\n- [🔧 Available Providers](#-available-providers)\n  - [Core Providers](#core-providers)\n  - [Social Media Providers](#social-media-providers)\n  - [Professional Providers](#professional-providers)\n  - [Gaming \u0026 Entertainment](#gaming--entertainment)\n- [🛠️ Creating Custom Providers](#️-creating-custom-providers)\n- [⚙️ Advanced Configuration](#️-advanced-configuration)\n- [🎯 Best Practices](#-best-practices)\n- [🏢 Brand Guidelines Compliance](#-brand-guidelines-compliance)\n- [📱 Platform Support](#-platform-support)\n- [🤝 Contributing](#-contributing)\n- [📄 License](#-license)\n\n## ✨ Features\n\n- 🎨 **Beautiful Design**: Pre-styled buttons with modern UI\n- 🔧 **Highly Customizable**: Extensive styling options with outline and filled variants\n- 📱 **Multiple Providers**: Support for Google, Apple, Facebook, Email, and Phone authentication\n- 🎯 **Flexible Layout**: Configurable grid layout with customizable rows and spacing\n- 🎭 **Display Modes**: Show icons only, text only, or both\n- 🚀 **Easy Integration**: Simple API that works with any authentication flow\n- 📦 **Lightweight**: Minimal dependencies with FontAwesome icons\n- 🎪 **Extensible**: Create custom providers by extending the base class\n\n## 📸 Preview\n\n\u003ctable\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimg src=\"assets/screenshot-2025-10-03_21.11.21.606.png\" width=\"250\" alt=\"Default Style\"/\u003e\n      \u003cbr/\u003e\n      \u003cb\u003eDefault Style\u003c/b\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimg src=\"assets/screenshot-2025-10-03_21.11.31.234.png\" width=\"250\" alt=\"Outline Style\"/\u003e\n      \u003cbr/\u003e\n      \u003cb\u003eOutline Style\u003c/b\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003cimg src=\"assets/screenshot-2025-10-03_21.11.34.609.png\" width=\"250\" alt=\"Filled Style\"/\u003e\n      \u003cbr/\u003e\n      \u003cb\u003eFilled Style\u003c/b\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n## 🚀 Getting Started\n\n### Installation\n\nAdd this to your package's `pubspec.yaml` file:\n\n```yaml\ndependencies:\n  sign_with_btn: ^1.0.0\n```\n\nThen run:\n\n```bash\nflutter pub get\n```\n\n### Import\n\n```dart\nimport 'package:sign_with_btn/sign_with_btn.dart';\n```\n\n## 📖 Usage\n\n### Basic Example\n\n```dart\nimport 'package:flutter/material.dart';\nimport 'package:sign_with_btn/sign_with_btn.dart';\n\nclass LoginScreen extends StatelessWidget {\n  @override\n  Widget build(BuildContext context) {\n    return Scaffold(\n      body: Center(\n        child: Padding(\n          padding: EdgeInsets.all(20),\n          child: SignWithBtn(\n            signTypes: [\n              SignWithGoogle(),\n              SignWithApple(),\n              SignWithFacebook(),\n              SignWithEmail(),\n            ],\n            onSign: (signType) {\n              // Handle sign-in logic\n              print('Signing in with ${signType.title}');\n            },\n          ),\n        ),\n      ),\n    );\n  }\n}\n```\n\n### Advanced Styling\n\n```dart\nSignWithBtn(\n  signTypes: [\n    SignWithGoogle(\n      style: SignWithStyle.outline(color: Colors.red),\n    ),\n    SignWithApple(\n      style: SignWithStyle.filled(background: Colors.black),\n    ),\n    SignWithFacebook(\n      style: SignWithStyle.filled(background: Color(0xFF1877F2)),\n    ),\n    SignWithEmail(\n      style: SignWithStyle.outline(color: Colors.grey),\n    ),\n  ],\n  countInRow: 2,\n  height: 55,\n  spaceBetween: 15,\n  onSign: (signType) {\n    if (signType is SignWithGoogle) {\n      _handleGoogleSignIn();\n    } else if (signType is SignWithApple) {\n      _handleAppleSignIn();\n    } else if (signType is SignWithFacebook) {\n      _handleFacebookSignIn();\n    } else if (signType is SignWithEmail) {\n      _handleEmailSignIn();\n    }\n  },\n)\n```\n\n### Custom Layout and Styling\n\n```dart\n// Icon-only buttons in a single row\nSignWithBtn(\n  signTypes: [\n    SignWithGoogle(),\n    SignWithApple(),\n    SignWithFacebook(),\n    SignWithPhone(),\n  ],\n  countInRow: 4,\n  style: SignWithStyle(\n    styleType: StyleType.icon,\n    buttonStyle: ButtonStyle(\n      backgroundColor: WidgetStatePropertyAll(Colors.grey[100]),\n      shape: WidgetStatePropertyAll(CircleBorder()),\n    ),\n  ),\n  height: 60,\n  onSign: (signType) =\u003e _handleSignIn(signType),\n)\n```\n\n### Global vs Individual Styling\n\n```dart\nSignWithBtn(\n  // Global style applied to all buttons\n  style: SignWithStyle.outline(color: Colors.blue),\n  signTypes: [\n    SignWithGoogle(), // Uses global style\n    SignWithApple(\n      // Individual style overrides global style\n      style: SignWithStyle.filled(background: Colors.black),\n    ),\n    SignWithFacebook(), // Uses global style\n  ],\n  onSign: (signType) =\u003e _handleSignIn(signType),\n)\n```\n\n## 🎨 Styling Options\n\n### SignWithStyle\n\nThe `SignWithStyle` class provides three ways to style your buttons:\n\n#### 1. Default Style\n\n```dart\nSignWithStyle() // Default Flutter button style with both icon and text\n```\n\n#### 2. Outline Style\n\n```dart\nSignWithStyle.outline(\n  color: Colors.blue,        // Border and text color\n  style: StyleType.both,     // Display mode\n  radius: 10,                // Border radius\n)\n```\n\n#### 3. Filled Style\n\n```dart\nSignWithStyle.filled(\n  background: Colors.red,    // Background color\n  foreground: Colors.white,  // Text and icon color\n  style: StyleType.both,     // Display mode\n  radius: 10,                // Border radius\n)\n```\n\n#### 4. Elevated Style\n\n```dart\nSignWithStyle.elevated(\n  background: Colors.white,     // Background color\n  foreground: Colors.black87,   // Text and icon color\n  elevation: 6.0,               // Shadow depth\n  radius: 12,                   // Border radius\n)\n```\n\n#### 5. Pill Style\n\n```dart\nSignWithStyle.pill(\n  background: Colors.blue,      // Background color\n  foreground: Colors.white,     // Text and icon color\n)\n```\n\n#### 6. Minimal Style\n\n```dart\nSignWithStyle.minimal(\n  color: Colors.grey[600]!,     // Color for text and hover effects\n  style: StyleType.both,        // Display mode\n)\n```\n\n#### 7. Neumorphic Style\n\n```dart\nSignWithStyle.neumorphic(\n  baseColor: Colors.grey[200]!, // Base color for the effect\n  isPressed: false,             // Pressed (inset) or raised (outset)\n  radius: 20,                   // Border radius\n)\n```\n\n#### 8. Gradient Style\n\n```dart\nSignWithStyle.gradient(\n  gradient: LinearGradient(\n    colors: [Colors.blue, Colors.purple],\n  ),\n  foreground: Colors.white,     // Text and icon color\n)\n```\n\n#### 9. Brand-Specific Styles\n\nOfficial brand styling that follows each platform's design guidelines:\n\n```dart\n// Google's official style\nSignWithGoogle(style: SignWithStyle.google())\n\n// Apple's official style\nSignWithApple(style: SignWithStyle.apple())\n\n// Facebook's official style\nSignWithFacebook(style: SignWithStyle.facebook())\n\n// Twitter's official style\nSignWithTwitter(style: SignWithStyle.twitter())\n\n// GitHub's official style\nSignWithGitHub(style: SignWithStyle.github())\n\n// LinkedIn's official style\nSignWithLinkedIn(style: SignWithStyle.linkedin())\n\n// Microsoft's official style\nSignWithMicrosoft(style: SignWithStyle.microsoft())\n\n// Discord's official style\nSignWithDiscord(style: SignWithStyle.discord())\n\n// Slack's official style\nSignWithSlack(style: SignWithStyle.slack())\n\n// Spotify's official style\nSignWithSpotify(style: SignWithStyle.spotify())\n\n// Instagram's official style\nSignWithInstagram(style: SignWithStyle.instagram())\n\n// TikTok's official style\nSignWithTikTok(style: SignWithStyle.tiktok())\n\n// Twitch's official style\nSignWithTwitch(style: SignWithStyle.twitch())\n\n// Reddit's official style\nSignWithReddit(style: SignWithStyle.reddit())\n```\n\n#### 10. Custom Style\n\n```dart\nSignWithStyle(\n  buttonStyle: ButtonStyle(\n    backgroundColor: WidgetStatePropertyAll(Colors.purple),\n    foregroundColor: WidgetStatePropertyAll(Colors.white),\n    elevation: WidgetStatePropertyAll(4),\n    shape: WidgetStatePropertyAll(\n      RoundedRectangleBorder(\n        borderRadius: BorderRadius.circular(20),\n      ),\n    ),\n  ),\n  styleType: StyleType.both,\n)\n```\n\n### StyleType Options\n\n- `StyleType.both` - Show both icon and text (default)\n- `StyleType.icon` - Show only the icon\n- `StyleType.text` - Show only the text\n\n## 🔧 Available Providers\n\n### Core Providers\n\n| Provider | Class                | Icon          | Default Title |\n| -------- | -------------------- | ------------- | ------------- |\n| Google   | `SignWithGoogle()`   | Google logo   | \"Google\"      |\n| Apple    | `SignWithApple()`    | Apple logo    | \"Apple\"       |\n| Facebook | `SignWithFacebook()` | Facebook logo | \"Facebook\"    |\n| Email    | `SignWithEmail()`    | Envelope      | \"Email\"       |\n| Phone    | `SignWithPhone()`    | Phone         | \"Phone\"       |\n\n### Social Media Providers\n\n| Provider  | Class                 | Icon           | Default Title |\n| --------- | --------------------- | -------------- | ------------- |\n| Twitter   | `SignWithTwitter()`   | Twitter logo   | \"Twitter\"     |\n| Instagram | `SignWithInstagram()` | Instagram logo | \"Instagram\"   |\n| TikTok    | `SignWithTikTok()`    | TikTok logo    | \"TikTok\"      |\n| Reddit    | `SignWithReddit()`    | Reddit logo    | \"Reddit\"      |\n\n### Professional Providers\n\n| Provider  | Class                 | Icon           | Default Title |\n| --------- | --------------------- | -------------- | ------------- |\n| LinkedIn  | `SignWithLinkedIn()`  | LinkedIn logo  | \"LinkedIn\"    |\n| Microsoft | `SignWithMicrosoft()` | Microsoft logo | \"Microsoft\"   |\n| GitHub    | `SignWithGitHub()`    | GitHub logo    | \"GitHub\"      |\n| Slack     | `SignWithSlack()`     | Slack logo     | \"Slack\"       |\n\n### Gaming \u0026 Entertainment\n\n| Provider | Class               | Icon         | Default Title |\n| -------- | ------------------- | ------------ | ------------- |\n| Discord  | `SignWithDiscord()` | Discord logo | \"Discord\"     |\n| Twitch   | `SignWithTwitch()`  | Twitch logo  | \"Twitch\"      |\n| Spotify  | `SignWithSpotify()` | Spotify logo | \"Spotify\"     |\n\n## 🛠️ Creating Custom Providers\n\nYou can create custom sign-in providers by extending the `SignWithType` class:\n\n```dart\nclass SignWithTwitter extends SignWithType {\n  const SignWithTwitter({\n    super.title = \"Twitter\",\n    super.icon = const FaIcon(FontAwesomeIcons.twitter),\n    super.style,\n  });\n}\n\n// Usage\nSignWithBtn(\n  signTypes: [\n    SignWithGoogle(),\n    SignWithTwitter(), // Your custom provider\n  ],\n  onSign: (signType) {\n    if (signType is SignWithTwitter) {\n      _handleTwitterSignIn();\n    }\n  },\n)\n```\n\n## 📋 API Reference\n\n### SignWithBtn\n\n| Property       | Type                      | Default           | Description                          |\n| -------------- | ------------------------- | ----------------- | ------------------------------------ |\n| `signTypes`    | `List\u003cSignWithType\u003e`      | required          | List of sign-in providers to display |\n| `onSign`       | `Function(SignWithType)?` | null              | Callback when a button is pressed    |\n| `countInRow`   | `int`                     | 2                 | Number of buttons per row            |\n| `style`        | `SignWithStyle`           | `SignWithStyle()` | Global styling for all buttons       |\n| `height`       | `double`                  | 50                | Height of each button                |\n| `spaceBetween` | `double`                  | 10                | Spacing between buttons              |\n\n### SignWithStyle\n\n| Property      | Type          | Default          | Description                       |\n| ------------- | ------------- | ---------------- | --------------------------------- |\n| `buttonStyle` | `ButtonStyle` | `ButtonStyle()`  | Flutter ButtonStyle configuration |\n| `styleType`   | `StyleType`   | `StyleType.both` | Content display mode              |\n\n## 🤝 Integration Examples\n\n### With Firebase Auth\n\n```dart\nvoid _handleGoogleSignIn() async {\n  try {\n    final GoogleSignInAccount? googleUser = await GoogleSignIn().signIn();\n    final GoogleSignInAuthentication? googleAuth =\n        await googleUser?.authentication;\n\n    final credential = GoogleAuthProvider.credential(\n      accessToken: googleAuth?.accessToken,\n      idToken: googleAuth?.idToken,\n    );\n\n    await FirebaseAuth.instance.signInWithCredential(credential);\n  } catch (e) {\n    print('Google Sign-In Error: $e');\n  }\n}\n```\n\n### With Custom Authentication\n\n```dart\nvoid _handleEmailSignIn() {\n  Navigator.push(\n    context,\n    MaterialPageRoute(\n      builder: (context) =\u003e EmailLoginScreen(),\n    ),\n  );\n}\n\nvoid _handlePhoneSignIn() {\n  Navigator.push(\n    context,\n    MaterialPageRoute(\n      builder: (context) =\u003e PhoneVerificationScreen(),\n    ),\n  );\n}\n```\n\n## 🎯 Best Practices\n\n1. **Brand Compliance**: Use official brand styles for authentic appearance\n\n   ```dart\n   // ✅ Good - Uses official Google styling\n   SignWithGoogle(style: SignWithStyle.google())\n\n   // ❌ Avoid - Custom colors that don't match brand guidelines\n   SignWithGoogle(style: SignWithStyle.filled(background: Colors.purple))\n   ```\n\n2. **Consistent Styling**: Use a consistent approach across all providers\n3. **Provider Priority**: Place the most commonly used providers first\n4. **Responsive Design**: Test different screen sizes and orientations\n5. **Accessibility**: Ensure buttons have proper semantic labels\n6. **Error Handling**: Always handle authentication errors gracefully\n\n## 🏢 Brand Guidelines Compliance\n\nThis package includes official brand styling for major authentication providers:\n\n- **Google**: Follows Google Sign-In branding guidelines\n- **Apple**: Complies with Apple's Human Interface Guidelines\n- **Facebook**: Uses Facebook's official brand colors and styling\n- **Twitter**: Matches Twitter's current brand identity\n- **GitHub**: Follows GitHub's design system\n- **LinkedIn**: Uses LinkedIn's professional brand styling\n- **Microsoft**: Complies with Microsoft's design language\n- **Discord**: Matches Discord's gaming-focused brand\n- **Slack**: Uses Slack's workspace-oriented styling\n- **Spotify**: Follows Spotify's music platform branding\n- **Instagram**: Uses Instagram's social media styling\n- **TikTok**: Matches TikTok's modern social platform design\n- **Twitch**: Follows Twitch's streaming platform branding\n- **Reddit**: Uses Reddit's community-focused styling\n\nAll brand styles include authentic colors, border radius, and visual elements that match each platform's official design guidelines.\n\n## 📱 Platform Support\n\n- ✅ Android\n- ✅ iOS\n- ✅ Web\n- ✅ macOS\n- ✅ Windows\n- ✅ Linux\n\n## 🐛 Issues and Feedback\n\nIf 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).\n\n## 🤝 Contributing\n\nContributions 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.\n\n1. Fork the repository\n2. Create your feature branch (`git checkout -b feature/amazing-feature`)\n3. Commit your changes (`git commit -m 'Add some amazing feature'`)\n4. Push to the branch (`git push origin feature/amazing-feature`)\n5. Open a Pull Request\n\n## 📄 License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n## 👨‍💻 Author\n\n**Mohamed Maher** - [GitHub](https://github.com/mohamedmaher-dev)\n\n- 📧 Email: mohamedmaher.personal@gmail.com\n- 💼 LinkedIn: [Mohamed Maher](https://linkedin.com/in/mohamedmaher-dev)\n- 🌍 Portfolio: [mohamedmaher.dev](https://mohamedmaher.dev)\n\n## ⭐ Show Your Support\n\nIf 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)!\n\n---\n\nMade with ❤️ by [Mohamed Maher](https://github.com/mohamedmaher-dev)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmohamedmaher-dev%2Fsign_with_btn","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmohamedmaher-dev%2Fsign_with_btn","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmohamedmaher-dev%2Fsign_with_btn/lists"}