Flutter Social Login Buttons (Facebook Login, Google Login, etc)

Flutter Social Login Button Design Tutorial

Social logins are very common in every app these days, almost every mobile has social media integration for sign-in/ signup. There are several common and popular platforms that are widely used as Facebook, google, apple, linked in, etc. Flutter provides a wonderful environment to integrate with any social platform. In this tutorial, we will design Flutter social login buttons design like Flutter Facebook login, Flutter google login, etc.

To ingrate with social login, we need buttons in our design, here I have made some basic and simple flutter designs to save the designing time. Here is a single button that can use for any platform with some parameters which can be customized as per the need. This is the only customization of buttons not the actual implementation of flutter social login and I will post a separate tutorial for that.

This tutorial gives a basic understanding of how we can customize any widget in a flutter, we can make a custom button, dropdown, lists, etc.

Flutter is an awesome mobile application development platform that provides a lot of good stuff with few lines of code

Expected output

Required Dependencies

font_awesome_flutter: 
fluttertoast:

Installing it

flutter pub get

We are using the flutter “font_awesome_flutter” package to get some readymade and beautiful icons and the second one is “fluttertoast” to show the toast on click event. These 2 packages are very famous and useful packages in flutter application development.

Let’s start with the coding, we have 2 important files which are making magic for us.

First, we will define the required colors in a separate file named “colors.dart” here we have different colors for our buttons.
We created a file “widgets.dart”. This file is containing our custom social login button design. We have created 2 types of buttons, rectangle, and circle.

colors.dart

import 'package:flutter/material.dart';


final Color facebookColor = const Color(0xff39579A);
final Color twitterColor = const Color(0xff00ABEA);
final Color instaColor = const Color(0xffBE2289);
final Color whatsappColor = const Color(0xff075E54);
final Color linkedinColor = const Color(0xff0085E0);
final Color githubColor = const Color(0xff202020);
final Color googleColor = const Color(0xffDF4A32);

widgets.dart

import 'package:flutter/material.dart';

class CustomWidgets {
  static Widget socialButtonRect(title, color, icon, {Function? onTap}) {
    return InkWell(
      onTap: () {
        onTap!();
      },
      child: Container(
        height: 50,
        margin: EdgeInsets.symmetric(vertical: 20, horizontal: 20),
        decoration: BoxDecoration(
            color: color, borderRadius: BorderRadius.all(Radius.circular(10))),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Icon(
              icon,
              color: Colors.white,
            ),
            Container(
              margin: EdgeInsets.only(left: 20),
              child: Text(title,
                  style: TextStyle(
                      color: Colors.white,
                      fontSize: 18,
                      fontWeight: FontWeight.w400)),
            ),
          ],
        ),
      ),
    );
  }

  static Widget socialButtonCircle(color, icon, {iconColor, Function? onTap}) {
    return InkWell(
      onTap: () {
        onTap!();
      },
      child: Container(
          padding: const EdgeInsets.all(20.0),
          decoration: new BoxDecoration(
            shape: BoxShape.circle,
            color: color,
          ),
          child: Icon(
            icon,
            color: iconColor,
          )), //
    );
  }
}

Complete code and implementation

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_social_buttons_example/res/colors.dart';
import 'package:flutter_social_buttons_example/res/widgets.dart';
import 'package:fluttertoast/fluttertoast.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Social Buttons Example'),
      ),
      body: ListView(
        children: [
          CustomWidgets.socialButtonRect(
              'Login with Facebook', facebookColor, FontAwesomeIcons.facebookF,
              onTap: () {
            Fluttertoast.showToast(msg: 'I am facebook');
          }),
          CustomWidgets.socialButtonRect(
              'Login with Google', googleColor, FontAwesomeIcons.googlePlusG,
              onTap: () {
            Fluttertoast.showToast(msg: 'I am google');
          }),
          CustomWidgets.socialButtonRect(
              'Login with LinkedIn', linkedinColor, FontAwesomeIcons.linkedinIn,
              onTap: () {
            Fluttertoast.showToast(msg: 'I am linkedin');
          }),
          CustomWidgets.socialButtonRect(
              'Login with Github', githubColor, FontAwesomeIcons.github,
              onTap: () {
            Fluttertoast.showToast(msg: 'I am github');
          }),
          CustomWidgets.socialButtonRect(
              'Whatsapp Now', whatsappColor, FontAwesomeIcons.whatsapp,
              onTap: () {
            Fluttertoast.showToast(msg: 'I am whatsapp');
          }),
          Padding(
            padding: const EdgeInsets.all(20.0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                CustomWidgets.socialButtonCircle(
                    facebookColor, FontAwesomeIcons.facebookF,
                    iconColor: Colors.white, onTap: () {
                  Fluttertoast.showToast(msg: 'I am circle facebook');
                }),
                CustomWidgets.socialButtonCircle(
                    googleColor, FontAwesomeIcons.googlePlusG,
                    iconColor: Colors.white, onTap: () {
                  Fluttertoast.showToast(msg: 'I am circle google');
                }),
                CustomWidgets.socialButtonCircle(
                    whatsappColor, FontAwesomeIcons.whatsapp,
                    iconColor: Colors.white, onTap: () {
                  Fluttertoast.showToast(msg: 'I am circle whatsapp');
                }),
              ],
            ),
          ),
        ],
      ),
    );
  }
}