sign_with_btn 1.1.0 
sign_with_btn: ^1.1.0 copied to clipboard
Published 3 days ago • 
momaher.dev
momaher.devA beautiful Flutter package for creating customizable sign-in buttons with support for Google, Apple, Facebook, Email, and Phone authentication providers.
// ignore_for_file: avoid_print
import 'package:flutter/material.dart';
import 'package:sign_with_btn/sign_with_btn.dart';
void main() => runApp(const SignWithBtnExampleApp());
class SignWithBtnExampleApp extends StatelessWidget {
const SignWithBtnExampleApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Sign With Button Examples',
theme: ThemeData(primarySwatch: Colors.blue, useMaterial3: true),
home: const ExampleHomePage(),
debugShowCheckedModeBanner: false,
);
}
}
class ExampleHomePage extends StatefulWidget {
const ExampleHomePage({super.key});
@override
State<ExampleHomePage> createState() => _ExampleHomePageState();
}
class _ExampleHomePageState extends State<ExampleHomePage> {
String _lastSignInProvider = 'None';
void _handleSignIn(SignWithType signType) {
setState(() {
_lastSignInProvider = signType.title;
});
// Show a snackbar with the selected provider
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text('Signing in with ${signType.title}...'),
duration: const Duration(seconds: 2),
behavior: SnackBarBehavior.floating,
),
);
// Here you would typically handle the actual authentication
print('Sign-in requested for: ${signType.title}');
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Sign With Button Examples'),
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
centerTitle: true,
),
body: SingleChildScrollView(
padding: const EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Status Card
Card(
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Row(
children: [
const Icon(Icons.info_outline, color: Colors.blue),
const SizedBox(width: 12),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
'Last Sign-In Attempt:',
style: TextStyle(fontWeight: FontWeight.bold),
),
Text(
_lastSignInProvider,
style: TextStyle(
color: Theme.of(context).primaryColor,
fontSize: 16,
),
),
],
),
),
],
),
),
),
const SizedBox(height: 24),
// Example 1: Default Style
_buildExampleSection(
title: '1. Default Style',
description: 'Basic usage with default styling',
child: SignWithBtn(
signTypes: [
const SignWithGoogle(),
const SignWithApple(),
const SignWithFacebook(),
const SignWithEmail(),
],
onSign: _handleSignIn,
),
),
// Example 2: Outline Style
_buildExampleSection(
title: '2. Outline Style',
description: 'Outlined buttons with custom colors',
child: SignWithBtn(
signTypes: [
SignWithGoogle(
style: SignWithStyle.outline(color: Colors.red),
),
SignWithApple(
style: SignWithStyle.outline(color: Colors.black),
),
SignWithFacebook(
style: SignWithStyle.outline(
color: const Color(0xFF1877F2),
),
),
SignWithPhone(
style: SignWithStyle.outline(color: Colors.green),
),
],
onSign: _handleSignIn,
),
),
// Example 3: Filled Style
_buildExampleSection(
title: '3. Filled Style',
description: 'Filled buttons with brand colors',
child: SignWithBtn(
signTypes: [
SignWithGoogle(
style: SignWithStyle.filled(background: Colors.red),
),
SignWithApple(
style: SignWithStyle.filled(background: Colors.black),
),
SignWithFacebook(
style: SignWithStyle.filled(
background: const Color(0xFF1877F2),
),
),
SignWithEmail(
style: SignWithStyle.filled(background: Colors.grey[700]!),
),
],
onSign: _handleSignIn,
),
),
// Example 4: Icon Only
_buildExampleSection(
title: '4. Icon Only Style',
description: 'Display only icons in a horizontal row',
child: SignWithBtn(
signTypes: [
const SignWithGoogle(),
const SignWithApple(),
const SignWithFacebook(),
const SignWithEmail(),
const SignWithPhone(),
],
countInRow: 5,
style: SignWithStyle(
styleType: StyleType.icon,
buttonStyle: ButtonStyle(
backgroundColor: WidgetStatePropertyAll(Colors.grey[100]),
foregroundColor: const WidgetStatePropertyAll(
Colors.black87,
),
shape: const WidgetStatePropertyAll(CircleBorder()),
),
),
height: 60,
onSign: _handleSignIn,
),
),
// Example 5: Text Only
_buildExampleSection(
title: '5. Text Only Style',
description: 'Display only text labels',
child: SignWithBtn(
signTypes: [const SignWithGoogle(), const SignWithApple()],
style: SignWithStyle(
styleType: StyleType.text,
buttonStyle: ButtonStyle(
backgroundColor: WidgetStatePropertyAll(Colors.blue[50]),
foregroundColor: const WidgetStatePropertyAll(Colors.blue),
side: const WidgetStatePropertyAll(
BorderSide(color: Colors.blue, width: 1),
),
shape: WidgetStatePropertyAll(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(25),
),
),
),
),
height: 50,
onSign: _handleSignIn,
),
),
// Example 6: Single Column Layout
_buildExampleSection(
title: '6. Single Column Layout',
description: 'One button per row with increased height',
child: SignWithBtn(
signTypes: [
SignWithGoogle(
style: SignWithStyle.outline(color: Colors.red),
),
SignWithApple(
style: SignWithStyle.filled(background: Colors.black),
),
SignWithEmail(
style: SignWithStyle.outline(color: Colors.grey),
),
],
countInRow: 1,
height: 55,
spaceBetween: 12,
onSign: _handleSignIn,
),
),
// Example 7: Custom Styling
_buildExampleSection(
title: '7. Custom Advanced Styling',
description: 'Completely custom button styles',
child: SignWithBtn(
signTypes: [
SignWithGoogle(
style: SignWithStyle(
buttonStyle: ButtonStyle(
backgroundColor: WidgetStatePropertyAll(Colors.red[50]),
foregroundColor: const WidgetStatePropertyAll(
Colors.red,
),
elevation: const WidgetStatePropertyAll(2),
shadowColor: WidgetStatePropertyAll(Colors.red[100]),
shape: WidgetStatePropertyAll(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15),
side: const BorderSide(color: Colors.red, width: 2),
),
),
),
),
),
SignWithApple(
style: SignWithStyle(
buttonStyle: ButtonStyle(
backgroundColor: const WidgetStatePropertyAll(
Colors.black,
),
foregroundColor: const WidgetStatePropertyAll(
Colors.white,
),
elevation: const WidgetStatePropertyAll(4),
shape: WidgetStatePropertyAll(
RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15),
),
),
),
),
),
],
height: 60,
spaceBetween: 15,
onSign: _handleSignIn,
),
),
// Example 8: Global Style Override
_buildExampleSection(
title: '8. Global vs Individual Styles',
description: 'Global style with individual overrides',
child: SignWithBtn(
style: SignWithStyle.outline(color: Colors.purple),
signTypes: [
const SignWithGoogle(), // Uses global style
SignWithApple(
// Individual style overrides global
style: SignWithStyle.filled(background: Colors.black),
),
const SignWithFacebook(), // Uses global style
SignWithEmail(
// Individual style overrides global
style: SignWithStyle.filled(background: Colors.orange),
),
],
onSign: _handleSignIn,
),
),
// Example 9: New Elevated Style
_buildExampleSection(
title: '9. Elevated Style',
description: 'Buttons with shadow and elevation effects',
child: SignWithBtn(
signTypes: [
SignWithGitHub(
style: SignWithStyle.elevated(
background: Colors.white,
foreground: Colors.black87,
elevation: 6.0,
),
),
SignWithLinkedIn(
style: SignWithStyle.elevated(
background: const Color(0xFF0077B5),
foreground: Colors.white,
elevation: 4.0,
),
),
],
onSign: _handleSignIn,
),
),
// Example 10: Pill Style
_buildExampleSection(
title: '10. Pill Style',
description: 'Fully rounded pill-shaped buttons',
child: SignWithBtn(
signTypes: [
SignWithTwitter(
style: SignWithStyle.pill(
background: const Color(0xFF1DA1F2),
),
),
SignWithDiscord(
style: SignWithStyle.pill(
background: const Color(0xFF5865F2),
),
),
SignWithSpotify(
style: SignWithStyle.pill(
background: const Color(0xFF1DB954),
),
),
],
countInRow: 3,
onSign: _handleSignIn,
),
),
// Example 11: Minimal Style
_buildExampleSection(
title: '11. Minimal Style',
description: 'Clean minimal design with subtle hover effects',
child: SignWithBtn(
signTypes: [
SignWithMicrosoft(
style: SignWithStyle.minimal(color: Colors.blue[700]!),
),
SignWithSlack(
style: SignWithStyle.minimal(color: Colors.purple[700]!),
),
],
onSign: _handleSignIn,
),
),
// Example 12: Mixed Social Providers
_buildExampleSection(
title: '12. Social Media Providers',
description: 'Various social media authentication options',
child: SignWithBtn(
signTypes: [
SignWithInstagram(
style: SignWithStyle.filled(
background: const Color(0xFFE1306C),
),
),
SignWithTikTok(
style: SignWithStyle.filled(background: Colors.black),
),
SignWithTwitch(
style: SignWithStyle.filled(
background: const Color(0xFF9146FF),
),
),
SignWithReddit(
style: SignWithStyle.filled(
background: const Color(0xFFFF4500),
),
),
],
onSign: _handleSignIn,
),
),
// Example 13: Neumorphic Style
_buildExampleSection(
title: '13. Neumorphic Style',
description: 'Soft, tactile button design',
child: SignWithBtn(
signTypes: [
SignWithGoogle(
style: SignWithStyle.neumorphic(
baseColor: Colors.grey[200],
isPressed: false,
),
),
SignWithApple(
style: SignWithStyle.neumorphic(
baseColor: Colors.grey[200],
isPressed: true,
),
),
],
onSign: _handleSignIn,
),
),
// Example 14: Official Brand Styles - Core Providers
_buildExampleSection(
title: '14. Official Brand Styles - Core',
description:
'Authentic brand styling following official guidelines',
child: SignWithBtn(
signTypes: [
SignWithGoogle(style: SignWithStyle.google()),
SignWithApple(style: SignWithStyle.apple()),
SignWithFacebook(style: SignWithStyle.facebook()),
SignWithEmail(
style: SignWithStyle.minimal(color: Colors.grey[700]!),
),
],
onSign: _handleSignIn,
),
),
// Example 15: Official Brand Styles - Social Media
_buildExampleSection(
title: '15. Official Brand Styles - Social Media',
description: 'Authentic social media brand styling',
child: SignWithBtn(
signTypes: [
SignWithTwitter(style: SignWithStyle.twitter()),
SignWithInstagram(style: SignWithStyle.instagram()),
SignWithTikTok(style: SignWithStyle.tiktok()),
SignWithReddit(style: SignWithStyle.reddit()),
],
onSign: _handleSignIn,
),
),
// Example 16: Official Brand Styles - Professional
_buildExampleSection(
title: '16. Official Brand Styles - Professional',
description: 'Authentic professional platform styling',
child: SignWithBtn(
signTypes: [
SignWithLinkedIn(style: SignWithStyle.linkedin()),
SignWithMicrosoft(style: SignWithStyle.microsoft()),
SignWithGitHub(style: SignWithStyle.github()),
SignWithSlack(style: SignWithStyle.slack()),
],
onSign: _handleSignIn,
),
),
// Example 17: Official Brand Styles - Gaming & Entertainment
_buildExampleSection(
title: '17. Official Brand Styles - Gaming & Entertainment',
description:
'Authentic gaming and entertainment platform styling',
child: SignWithBtn(
signTypes: [
SignWithDiscord(style: SignWithStyle.discord()),
SignWithTwitch(style: SignWithStyle.twitch()),
SignWithSpotify(style: SignWithStyle.spotify()),
],
countInRow: 3,
onSign: _handleSignIn,
),
),
// Example 18: Mixed Brand and Custom Styles
_buildExampleSection(
title: '18. Mixed Brand and Custom Styles',
description:
'Combining official brand styles with custom styling',
child: SignWithBtn(
signTypes: [
SignWithGoogle(style: SignWithStyle.google()),
SignWithApple(style: SignWithStyle.apple()),
SignWithEmail(
style: SignWithStyle.elevated(
background: Colors.indigo,
foreground: Colors.white,
),
),
SignWithPhone(
style: SignWithStyle.pill(background: Colors.green),
),
],
onSign: _handleSignIn,
),
),
const SizedBox(height: 32),
// Footer
const Card(
child: Padding(
padding: EdgeInsets.all(16.0),
child: Column(
children: [
Text(
'🎉 Sign With Button Package',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
),
),
SizedBox(height: 8),
Text(
'A beautiful Flutter package for creating customizable sign-in buttons',
textAlign: TextAlign.center,
style: TextStyle(color: Colors.grey),
),
SizedBox(height: 8),
Text(
'Made with ❤️ by Mohamed Maher',
style: TextStyle(
fontStyle: FontStyle.italic,
color: Colors.grey,
),
),
],
),
),
),
],
),
),
);
}
Widget _buildExampleSection({
required String title,
required String description,
required Widget child,
}) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
title,
style: const TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
),
const SizedBox(height: 4),
Text(
description,
style: TextStyle(color: Colors.grey[600], fontSize: 14),
),
const SizedBox(height: 12),
Card(
elevation: 2,
child: Padding(padding: const EdgeInsets.all(16.0), child: child),
),
const SizedBox(height: 24),
],
);
}
}Metadata
1
likes
160
points
71
downloads
Publisher
Weekly Downloads
Metadata
A beautiful Flutter package for creating customizable sign-in buttons with support for Google, Apple, Facebook, Email, and Phone authentication providers.
Repository (GitHub)
View/report issues
Topics
#authentication #btn #buttons #sign #widget
Documentation
License
MIT (license)
