A Flutter package for generating sign in buttons for different social media accounts.

Overview

Sign In Button

A Flutter plugin for generating sign in buttons for different social media accounts.

Getting Started

You must add the library as a dependency to your project.

dependencies:
 sign_button: ^2.0.2

You should then run flutter packages get

Now in your Dart code, you can use:

import 'package:sign_button/sign_button.dart'

Usage Example

It very simple!

SignInButton(
  buttonType: ButtonType.google,
  onPressed: () {
   print('click');
  })

ButtonSize

SignInButton(
  buttonType: ButtonType.google,
  buttonSize: ButtonSize.large, // small(default), medium, large
  onPressed: () {
   print('click');
  })

ImagePosition

SignInButton(
  imagePosition: ImagePosition.left, // left or right
  buttonType: ButtonType.google,
  onPressed: () {
   print('click');
  })

Customized Button

SignInButton(
 buttonType: ButtonType.pinterest,
 imagePosition: ImagePosition.right,
 //[buttonSize] You can also use this in combination with [width]. Increases the font and icon size of the button.
 buttonSize: ButtonSize.large,
 btnTextColor: Colors.grey,
 btnColor: Colors.white,
 width: 140,
 //[width] Use if you change the text value.
 btnText: 'Pinterest',
 onPressed: () {
  print('click');
 })

Disabled Button

SignInButton(
 buttonType: ButtonType.facebook,
 onPressed: null,
),

Mini Button

SignInButton.mini(
 buttonType: ButtonType.github,
 onPressed: () {},
),

Other properties

  • btnText
  • btnColor
  • btnTextColor
  • elevation
  • shape
  • width // You can change the value of width when the text size becomes too small.
  • padding // Padding value is automatically adjusted according to the button size. You can give a value if you want
Comments
  • Null Safety Migrated

    Null Safety Migrated

    Description

    • [✔️] Migrated to sound null safety

    • [✔️] Bump up package version to 1.0.2.nullsafety.0

    • [✔️] Updated CHANGELOG.md

      Create a Null-Safety branch to merge this PR fixed issue #7

    opened by adarsh-technocrat 3
  • googleDark should have a black background?

    googleDark should have a black background?

    Hello,

    Noticed googleDark has a Facebook like blue backgroud instead of black.

    Can you correct it?

    Alternatively, could we have a custom background color setting perhaps? So you dont have to hardcode these variables?

    opened by giorgio79 2
  • RenderFlex overflowed while testing

    RenderFlex overflowed while testing

    I try to run a simple test with a SignInButton:

    void main() {
    
      testWidgets('Test #1', (tester) async {
      
        await tester.pumpWidget(
          MaterialApp(
            home: Container(
              child: SignInButton(
                buttonType: ButtonType.google,
                onPressed: () {},
              ),
            ),
          ),
        );
    
        final buttonFinder = find.byType(SignInButton);
        expect(buttonFinder, findsOneWidget);
      }
    }
    

    But it throws the following exception message:

    ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
    The following assertion was thrown during layout:
    A RenderFlex overflowed by 114 pixels on the right.
    
    The relevant error-causing widget was:
      Row
      file:///home/alexis/.pub-cache/hosted/pub.dartlang.org/sign_button-1.0.0/lib/create_button.dart:102:22
    
    The overflowing RenderFlex has an orientation of Axis.horizontal.
    The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and
    black striped pattern. This is usually caused by the contents being too big for the RenderFlex.
    Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the
    RenderFlex to fit within the available space instead of being sized to their natural size.
    This is considered an error condition because it indicates that there is content that cannot be
    seen. If the content is legitimately bigger than the available space, consider clipping it with a
    ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex,
    like a ListView.
    The specific RenderFlex in question is: RenderFlex#72364 relayoutBoundary=up2 OVERFLOWING:
      creator: Row ← ConstrainedBox ← Container ← Center ← Padding ← Container ← IconTheme ← Builder ←
        Listener ← _GestureSemantics ← RawGestureDetector ← GestureDetector ← ⋯
      parentData: <none> (can use size)
      constraints: BoxConstraints(w=200.0, 0.0<=h<=600.0)
      size: Size(200.0, 34.0)
      direction: horizontal
      mainAxisAlignment: start
      mainAxisSize: min
      crossAxisAlignment: center
      textDirection: ltr
      verticalDirection: down
      textBaseline: alphabetic
    ◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤
    ════════════════════════════════════════════════════════════════════════════════════════════════════
    

    I tried to wrap the SignInButton with a SizedBox and then an nested Expanded but the issue is still here.

    The only fix I have found is to add the "width" parameter to SignInButton and set it to a value greater than or equal to 200 + the number of pixels returned by the error message (ie 200 + 114 here).

    This number of pixels is not the same if you change the "buttonType" parameter (eg 159 pixels with ButtonType.facebook).

    But the "width" parameter is not suitable for testing a real page which includes several SignInButton. Is there a workaround to run some tests with SignInButton ?

    opened by alexisbg 2
  • overflow FB button

    overflow FB button

    HI, I am using this widget, and I am generally new to flutter; I have the followign widget, and get overflow by using ther Fb button:

    class RegisterRoute extends StatelessWidget {
      const RegisterRoute({Key? key}) : super(key: key);
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: const Text("Register"),
            backgroundColor: Colors.orange,
          ),
          body: Center(
            child: Column(
              children: [
                SignInButton(
                    buttonType: ButtonType.google,
                    onPressed: () {
                      print('Google');
                    }),
                SignInButton(
                    buttonType: ButtonType.facebook,
                    onPressed: () {
                      print('Facebook');
                    }),
                SignInButton(
                    buttonType: ButtonType.apple,
                    onPressed: () {
                      print('Apple');
                    }),
                ElevatedButton(
                  onPressed: () {
                    Navigator.pop(context);
                  },
                  child: const Text('I have an account already'),
                ),
              ],
            ),
          ),
        );
      }
    }
    

    Any advice?

    image

    opened by omonimus1 1
  • Possibility to disable buttons

    Possibility to disable buttons

    Added the ability to disable a button with onPress to null. By default, uses the current theme's disabledColor for background and text.

    And use the power of describeEnum method to simplify image choice. Forced to rename dark images from google and facebook to match enum

    Resolve issue #15

    opened by NatsuOnFire 1
Owner
Android Application Developer at Mobven
null
Simple face recognition authentication (Sign up + Sign in) written in Flutter using Tensorflow Lite and Firebase ML vision library.

FaceNetAuthentication Simple face recognition authentication (Sign up + Sign in) written in Flutter using Tensorflow Lite and Google ML Kit library. S

Marcos Carlomagno 279 Jan 9, 2023
6.SignIn SignUp-UI - SIGN IN And SIGN UP UI For Flutter

SIGN IN & SIGN UP UI Text Fields Box Shadow Gradient resizeToAvoidBottomInset Ri

Tukhtamurodov Sardorbek 3 May 16, 2022
Ecommerce for a small marketplace built with Flutter! with seller and buyer accounts.

BB Baazar A Flutter project. The application is an Ecommerce built with FLUTTER and FIREBASE using MVC architecture. Here, multiple sellers can upload

Shankar Lohar 2 Sep 25, 2022
Flutter package to share images on social media

social_share Wide variety of sharing options you'll need to share directly to certain popular apps or just share with default native share. Introducti

Shekar Mudaliyar 74 Dec 8, 2022
This project uses transactions in Firebase(FirebaseAuth and FireStore) to send and receive virtual money across accounts

FinTech (WIP) This project uses transactions in Firebase(FirebaseAuth and FireStore) to send and receive virtual money across accounts. On account cre

Godson 4 Nov 15, 2022
DeFi Scan - Mobile BlockChain Explorer app for cryptocurrency accounts.

DeFi Scan This is the official repository for DeFi Scan - a mobile blockchain explorer built with Dart/Flutter for searching, curating and storing det

Ayodeji Olabisi 4 Dec 20, 2022
Flutter widget library containing buttons for authenticating with popular social networks: Apple, Google, Facebook, Twitter and Microsoft.

Flutter Auth Buttons This library is now in maintenance mode I'm no longer actively using Flutter and don't have the time to keep this library maintai

Duncan Jones 115 Nov 3, 2022
Scaff is a simple command-line utility for generating Dart and Flutter components from template files.

Introduction Scaffold Generator for Dart and Flutter. scaff is a simple command-line utility for generating Dart and Flutter components from template

Ganesh Rathinavel Medayil 29 Jul 17, 2022
A fluent API for generating valid Dart source code

A fluent, builder-based library for generating valid Dart code. Usage code_builder has a narrow and user-friendly API. See the example and test folder

Dart 330 Jan 7, 2023
Protofu is a Dart Command Line tool for generating your protobufs and included dependencies in one command.

ProtoFu - let me compile that for you ProtoFu exists to make working with protobufs easier. Gone are the days of downloading protoc and the dart proto

John McDole 5 Oct 27, 2022
Aio-project-flutter - All in one Social Media App getting developed using flutter

All in one Social Media App Getting built using flutter & firebase Add your sugg

Saffron Dionysius 8 Nov 17, 2022
This is just the simplyfied Flutter Plugin use for one of the popular flutter plugin for social media login.

social_media_logins Flutter Plugin to login via Social Media Accounts. Available Social Media Logins: Facebook Google Apple Getting Started To use thi

Reymark Esponilla 3 Aug 24, 2022
💘 This is my Youtube tutorial of my Social Media App Generation Made in Flutter 💘

?? Generation Tutorial ?? ⌛ This is the project source code of my youtube video tutorial of ⌛ ?? Flutter Social Media App Tutorial 2021 ?? ?? Tutorial

Samarpan Dasgupta 17 Nov 24, 2022
Social media app which is made entirely with flutter and firebase

Post It Android Please replace my googleservice.json with yours. Post it is a social media app which is made entirely with flutter and firebase. The u

Saket D Shetty 96 Dec 18, 2022
(Full-stack) Fully functional social media app (Instagram clone) written in flutter and dart with backend node.js and Postgres SQL.

Photoarc A Fully functional social media app written in flutter and dart using node.js and Postgres SQL as backend. Backend Repository Demo Download t

Ansh rathod 59 Jan 5, 2023
A fully functional social media app built with flutter with multiple features

?? ?? Wooble Social Media App Wooble is a fully functional social media app with multiple features built with flutter and dart. Star ⭐ the repo if you

Success Charles 562 Jan 3, 2023
Flutter Ghana UI Challenge Week 1 - Social Media App

Flutter Ghana UI Challenge Week 1 - Social Media App A Flutter UI implementation of a Social Media App inspired by Outcroud's desgin on Dribble. Star

Emmanuel Fache 104 Aug 11, 2022
Familicious-App - A social media app built with Flutter and Firebase

Famlicious App A social media app built with Flutter and Firebase This project i

Pham Quoc Duy 6 Dec 6, 2022
Kenso - A fully functional social media app with multiple features built with flutter and dart

Kenso - Social Media App Kenso is a fully functional social media app with multi

null 0 Feb 8, 2022