Flutter – Social Media Authentication Buttons

Customizing an application for a better user experience requires data storage of each individual user based on their preferences and interests. But profiling each and every user can be tedious.  This is where social media authentication comes into play. These authentication systems not only reduce the hectic process of creating a profile on the app but also secures users from unnecessary data leaks. This also reduces the storage need for the application and the server on which operates.

In this article, we will look into the process of adding social media authentication button in a Flutter application through a simple app. To build the same follow the below steps:

• Add the dependency to pubspec.yaml file.
• Import the dependency to the main.dart file
• Use a StatelessWidget to structure the app
• Directly add buttons to the application of the body through the dependency.

For the sake of simplicity we will not be adding and actions to the button. Now, let’s look into the steps in detail.

Adding the Dependency:

The below image shows the process of adding the flutter_auth_buttons dependency to the pubspec.yaml file.

Importing the Dependency:

The below line of code can be added at the top of the main.dart file to import the dependency:

import 'package:flutter_auth_buttons/flutter_auth_buttons.dart';

Structuring the Application:

At this stage use the StatelessWidget to extend it to an app body with an appbar as shown below:

Dart

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    const padding = 25.0;

    return MaterialApp(
      title: 'Social Media Authentication',
      home: Scaffold(
        appBar: AppBar(
          title: Text("GeeksForGeeks"),
          backgroundColor: Colors.green,
        ),
        backgroundColor: Color.fromARGB(0xFF, 0xF0, 0xF0, 0xF0),
        body: SingleChildScrollView(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children:
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Adding the Auth Buttons:

Inside the children of the StatelessWidget use a List to add authenticating buttons for Google, Facebook, MicroSoft, Apple and, Twitter by directly importing them from the package as shown below:

Dart

children: <Widget>[
                 SizedBox(height: padding),
                 AppleSignInButton(
                     onPressed: () {}, style: AppleButtonStyle.black),
                 SizedBox(height: padding),
                 GoogleSignInButton(onPressed: () {}, darkMode: true),
                 SizedBox(height: padding),
                 FacebookSignInButton(onPressed: () {}),
                 SizedBox(height: padding),
                 TwitterSignInButton(onPressed: () {}),
                 SizedBox(height: padding),
                 MicrosoftSignInButton(onPressed: () {}, darkMode: true),
               ],

Complete Source Code:

Dart

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

void main() async {
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    const padding = 25.0;

    return MaterialApp(
      title: 'Social Media Authentication',
      home: Scaffold(
        appBar: AppBar(
          title: Text("GeeksForGeeks"),
          backgroundColor: Colors.green,
        ),
        backgroundColor: Color.fromARGB(0xFF, 0xF0, 0xF0, 0xF0),
        body: SingleChildScrollView(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: <Widget>[
              Column(
                children: <Widget>[
                  SizedBox(height: padding),
                  AppleSignInButton(
                      onPressed: () {}, style: AppleButtonStyle.black),
                  SizedBox(height: padding),
                  GoogleSignInButton(onPressed: () {}, darkMode: true),
                  SizedBox(height: padding),
                  FacebookSignInButton(onPressed: () {}),
                  SizedBox(height: padding),
                  TwitterSignInButton(onPressed: () {}),
                  SizedBox(height: padding),
                  MicrosoftSignInButton(onPressed: () {}, darkMode: true),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Output: