Social Auth Buttons - Flutter (Google,Facebook,Twitter,Microsoft,Linked)

In this post, we are going to learn the Flutter Authenticating button widget library containing popular social networks such as Google, Facebook, Twitter, and Microsoft

Let's Start

Step 1: Create Flutter application

Step 2: Add dependencies

Add flutter_auth_buttons: ^0.6.0 plugin in pubspec.yaml file

dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_auth_buttons: ^0.6.0

 

Step 3: Create dart file and add below code

import 'package:flutter/material.dart';
import 'package:flutter_auth_buttons/flutter_auth_buttons.dart';

class SocialButtons extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Button Demo',
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.pinkAccent,
          title: Text("Social Auth Buttons"),
        ),
        backgroundColor: Color.fromARGB(0xFF, 0xF0, 0xF0, 0xF0),
        body: Center(
          child: SingleChildScrollView(
            child: Column(
              children: [
                Heading("Natural size"),
                Column(
                  children: [
                    GoogleSignInButton(onPressed: () {}),
                    GoogleSignInButton(onPressed: () {}, darkMode: true),
                    FacebookSignInButton(onPressed: () {}),
                    TwitterSignInButton(onPressed: () {}),
                    MicrosoftSignInButton(onPressed: () {}),
                    MicrosoftSignInButton(onPressed: () {}, darkMode: true),
                  ],
                ),
                SizedBox(height: 25.0),
                Heading("Stretched (by parent)"),
                Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 40.0),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.stretch,
                    children: [
                      GoogleSignInButton(onPressed: () {}),
                      GoogleSignInButton(onPressed: () {}, darkMode: true),
                      FacebookSignInButton(onPressed: () {}),
                      TwitterSignInButton(onPressed: () {}),
                      MicrosoftSignInButton(onPressed: () {}),
                      MicrosoftSignInButton(onPressed: () {}, darkMode: true),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

class Heading extends StatelessWidget {
  final String text;

  Heading(this.text);

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.only(top: 12.0, bottom: 12.0),
      child: Text(
        text,
        style: TextStyle(
          fontSize: 18.0,
          fontWeight: FontWeight.bold,
        ),
      ),
    );
  }
}

 

Step 4: Update main dart file

void main() => runApp(MyApp());

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      theme: ThemeData(
        primaryColor: Colors.pink
      ),
      home: SocialButtons(),
    );
  }

}

 

Step 5: Run application

Social Authentication Widget

We can add different styles for each button
 

this.darkMode = false,
this.borderRadius = defaultBorderRadius