Flutter – Social Media Authentication Buttons

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:
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.
The below image shows the process of adding the flutter_auth_buttons dependency to the pubspec.yaml file.
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';

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:              ),            ],          ),        ),      ),    );  }}
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:
android
Flutter
Flutter UI-components
Flutter-widgets
Dart
Flutter
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Flutter - Custom Bottom Navigation Bar
ListView Class in Flutter
Flutter - Search Bar
Flutter - FutureBuilder Widget
Flutter - Dialogs
Flutter - Custom Bottom Navigation Bar
Flutter Tutorial
Flutter - Search Bar
Flutter - FutureBuilder Widget
Flutter - Dialogs