Related Articles

Related Articles

Flutter – Social Media Authentication Buttons
  • Last Updated : 28 Oct, 2020

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

filter_none

edit
close

play_arrow

link
brightness_4
code

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:
              ),
            ],
          ),
        ),
      ),
    );
  }
}

chevron_right


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

filter_none

edit
close

play_arrow

link
brightness_4
code

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),
               ],

chevron_right


Complete Source Code:

Dart

filter_none

edit
close

play_arrow

link
brightness_4
code

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),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

chevron_right


Output:

social auth buttons




My Personal Notes arrow_drop_up
Recommended Articles
Page :