Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

Flutter – Social Media Authentication Buttons

  • Last Updated : 15 Feb, 2021

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:

Want a more fast-paced & competitive environment to learn the fundamentals of Android?
Click here to head to a guide uniquely curated by our experts with the aim to make you industry ready in no time!
  • 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:

social auth buttons




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!