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

flutter social login button design

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.

  1. First, we will define the required colors in a separate file named “colors.dart” here we have different colors for our buttons.
  2. 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');
}),
],
),
),
],
),
);
}
}

If you have any query feel free to ask. Also, check out the bottom navigation series and custom textfield, and many others.

Thanks for reading.

Er. Sandeep Singh Sidhu

I am the founder of CallStem Software LLP and Stem Technocrats IT Services, Blood Wallet, Apni Boli, and of course flutterfumes.com.
I am very passionate about technology and learning new things. I believe sharing knowledge is the most powerful way to learn. One who is an active learner is always an active contributor too because whatever you learn, you should implement.

I also love to write poetry, and talking to myself is my favorite all-time activity, no matter it is a program logic, emotional poetry, or a social issue.

Previous Post
Next Post

Leave a Reply

Your email address will not be published.

Hey, wait! If You don't want to miss Flutter Updates!

Please join our Newsletter List and enjoy with daily Flutter Updates