Facebook Sign in Flutter

Nowadays in most of the mobile app, it required login. And to log in, we need to signup first, filling the long-form. But we can log in to the app through a Social account, then we don’t need to fill a long form to register into the app. Facebook Sign in Flutter is one of the ways to log in.

Our Flutter app development company also provides various Social Login compatibility for mobile apps.

In today’s blog, we will see how we can implement Facebook Sign in Flutter.

Android Integration:

Step1: Open Facebook Developer, login with your facebook credentials and Create an App.

Step2: You will get an AppID, save it with you.

Step3: Now, copy-paste the following to your strings resource file. If you don’t have one, just create it.

<your project root>/android/app/src/main/res/values/strings.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="app_name">Your App Name here.</string>

    <!-- Replace "000000000000" with your Facebook App ID here. -->
    <string name="facebook_app_id">000000000000</string>

    <!--
      Replace "000000000000" with your Facebook App ID here.
      **NOTE**: The scheme needs to start with `fb` and then your ID.
    -->
    <string name="fb_login_protocol_scheme">fb000000000000</string>
</resources>

<?xml version="1.0" encoding="utf-8"?>

<!--

Replace "000000000000" with your Facebook App ID here.

**NOTE**: The scheme needs to start with `fb` and then your ID.

-->

</resources>

Step4: Then, copy-paste the following to your Android Manifest:

<your project root>/android/app/src/main/AndroidManifest.xml

<meta-data android:name="com.facebook.sdk.ApplicationId"
    android:value="@string/facebook_app_id"/>

<activity android:name="com.facebook.FacebookActivity"
    android:configChanges=
            "keyboard|keyboardHidden|screenLayout|screenSize|orientation"
    android:label="@string/app_name" />

<activity
    android:name="com.facebook.CustomTabActivity"
    android:exported="true">
    <intent-filter>
        <action android:name="android.intent.action.VIEW" />
        <category android:name="android.intent.category.DEFAULT" />
        <category android:name="android.intent.category.BROWSABLE" />
        <data android:scheme="@string/fb_login_protocol_scheme" />
    </intent-filter>
</activity>

android:value="@string/facebook_app_id"/>

<activity android:name="com.facebook.FacebookActivity"

android:configChanges=

"keyboard|keyboardHidden|screenLayout|screenSize|orientation"

android:label="@string/app_name" />

<activity

android:name="com.facebook.CustomTabActivity"

android:exported="true">

<intent-filter>

</intent-filter>

</activity>

iOS Integration:

Step1: “Register and Configure Your App with Facebook” step in the the Facebook Login documentation for iOS site. (Note: Complete Step 1 and and Step 3 only from the documentation).

Step2: Open Info.plist file as Source Code, copy-paste the following to your Info.plist file, before the ending </dict></plist>

<key>CFBundleURLTypes</key>
<array>
    <em><!--
    <dict>
    ... Some other CFBundleURLTypes definition.
    </dict>
    --></em>
    <dict>
        <key>CFBundleURLSchemes</key>
        <array>
            <em><!--
              Replace "000000000000" with your Facebook App ID here.
              **NOTE**: The scheme needs to start with `fb` and then your ID.
            --></em>
            <string>fb000000000000</string>
        </array>
    </dict>
</array>

<key>FacebookAppID</key>

<em><!-- Replace "000000000000" with your Facebook App ID here. --></em>
<string>000000000000</string>
<key>FacebookDisplayName</key>

<em><!-- Replace "YOUR_APP_NAME" with your Facebook App name. --></em>
<string>YOUR_APP_NAME</string>

<key>LSApplicationQueriesSchemes</key>
<array>
    <string>fbapi</string>
    <string>fb-messenger-share-api</string>
    <string>fbauth2</string>
    <string>fbshareextension</string>
</array>

<key>CFBundleURLTypes</key>

<array>

<!--

<dict>

... Some other CFBundleURLTypes definition.

</dict>

-->

<dict>

<key>CFBundleURLSchemes</key>

<array>

<!--

Replace "000000000000" with your Facebook App ID here.

**NOTE**: The scheme needs to start with `fb` and then your ID.

-->

</array>

</dict>

</array>

<key>FacebookAppID</key>

<key>FacebookDisplayName</key>

<key>LSApplicationQueriesSchemes</key>

<array>

<string>fbapi</string>

<string>fb-messenger-share-api</string>

<string>fbauth2</string>

<string>fbshareextension</string>

</array>

Flutter Code:

Step1: Add below code in package’s pubspec.yaml and run pub get, then run pub get.

flutter_facebook_login: ^3.0.0
http: any

1 2	flutter_facebook_login: ^3.0.0 http: any

Step2: Import below packages in the main.dart file.

import 'package:flutter/material.dart';
import 'package:flutter_facebook_login/flutter_facebook_login.dart';
import 'package:http/http.dart' as http;

import 'package:flutter/material.dart';

import 'package:flutter_facebook_login/flutter_facebook_login.dart';

import 'package:http/http.dart' as http;

Step3: For Facebook login check the below function.

  void loginButtonClicked() async {
    var facebookLoginResult =
    await facebookLogin.logIn(['email']);
    switch (facebookLoginResult.status) {
      case FacebookLoginStatus.error:
        onLoginStatusChanged(false);
        break;
      case FacebookLoginStatus.cancelledByUser:
        onLoginStatusChanged(false);
        break;
      case FacebookLoginStatus.loggedIn:
        var graphResponse = await http.get(
            Uri.parse('https://graph.facebook.com/v2.12/me?fields=name,first_name,last_name,email,picture.height(200)&access_token=${facebookLoginResult
                .accessToken.token}'));

        var profile = json.decode(graphResponse.body);
        print(profile.toString());

        onLoginStatusChanged(true, profileData: profile);
        break;
    }
  }

void loginButtonClicked() async {

var facebookLoginResult =

await facebookLogin.logIn(['email']);

switch (facebookLoginResult.status) {

case FacebookLoginStatus.error:

onLoginStatusChanged(false);

break;

case FacebookLoginStatus.cancelledByUser:

onLoginStatusChanged(false);

break;

case FacebookLoginStatus.loggedIn:

var graphResponse = await http.get(

Uri.parse('https://graph.facebook.com/v2.12/me?fields=name,first_name,last_name,email,picture.height(200)&access_token=${facebookLoginResult

.accessToken.token}'));

var profile = json.decode(graphResponse.body);

print(profile.toString());

onLoginStatusChanged(true, profileData: profile);

break;

}

Step4: Here’s the complete code for main.dart file.

import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:flutter_facebook_login/flutter_facebook_login.dart';
import 'package:http/http.dart' as http;

void main() {
  runApp(LoginPage());
}

class LoginPage extends StatefulWidget {
  @override
  _LoginPageState createState() => _LoginPageState();

}

class _LoginPageState extends State<LoginPage> {
  bool isLoggedIn = false;
  var profileData;

  var facebookLogin = FacebookLogin();

  void onLoginStatusChanged(bool isLoggedIn, {profileData}) {
    setState(() {
      this.isLoggedIn = isLoggedIn;
      this.profileData = profileData;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: Text("Facebook Login"),
        ),
        body: Container(
          child: Center(
            child: isLoggedIn
                ? _displayUserData(profileData)
                : _displayLoginButton(),
          ),
        ),
      ),
    );
  }

  void loginButtonClicked() async {
    var facebookLoginResult =
    await facebookLogin.logIn(['email']);
    switch (facebookLoginResult.status) {
      case FacebookLoginStatus.error:
        onLoginStatusChanged(false);
        break;
      case FacebookLoginStatus.cancelledByUser:
        onLoginStatusChanged(false);
        break;
      case FacebookLoginStatus.loggedIn:
        var graphResponse = await http.get(
            Uri.parse('https://graph.facebook.com/v2.12/me?fields=name,first_name,last_name,email,picture.height(200)&access_token=${facebookLoginResult
                .accessToken.token}'));

        var profile = json.decode(graphResponse.body);
        print(profile.toString());

        onLoginStatusChanged(true, profileData: profile);
        break;
    }
  }

  _displayUserData(profileData) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        Container(
          height: 200.0,
          width: 200.0,
          decoration: BoxDecoration(
            shape: BoxShape.rectangle,
            image: DecorationImage(
              fit: BoxFit.fill,
              image: NetworkImage(
                profileData['picture']['data']['url'],
              ),
            ),
          ),
        ),
        SizedBox(height: 28.0),
        Text(
          "Name: ${profileData['name']}",
          style: TextStyle(
            fontSize: 20.0,
          ),
        ),
        Text(
          "Email: ${profileData['email']}",
          style: TextStyle(
            fontSize: 20.0,
          ),
        ),
          ElevatedButton(
            child: Text("Logout"),
            onPressed: () => facebookLogin.isLoggedIn
                .then((isLoggedIn) => isLoggedIn ? _logout() : {}),
          )
      ],
    );
  }

  _displayLoginButton() {
    return ElevatedButton(
      child: Text("Login with Facebook"),
      onPressed: () => loginButtonClicked(),
    );
  }

  _logout() async {
    await facebookLogin.logOut();
    onLoginStatusChanged(false);
    print("Logged out");
  }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

import 'dart:convert';

import 'package:flutter/material.dart';

import 'package:flutter_facebook_login/flutter_facebook_login.dart';

import 'package:http/http.dart' as http;

void main() {

runApp(LoginPage());

}

class LoginPage extends StatefulWidget {

@override

_LoginPageState createState() => _LoginPageState();

}

class _LoginPageState extends State<LoginPage> {

bool isLoggedIn = false;

var profileData;

var facebookLogin = FacebookLogin();

void onLoginStatusChanged(bool isLoggedIn, {profileData}) {

setState(() {

this.isLoggedIn = isLoggedIn;

this.profileData = profileData;

});

}

@override

Widget build(BuildContext context) {

return MaterialApp(

debugShowCheckedModeBanner: false,

home: Scaffold(

appBar: AppBar(

title: Text("Facebook Login"),

body: Container(

child: Center(

child: isLoggedIn

? _displayUserData(profileData)

: _displayLoginButton(),

);

}

void loginButtonClicked() async {

var facebookLoginResult =

await facebookLogin.logIn(['email']);

switch (facebookLoginResult.status) {

case FacebookLoginStatus.error:

onLoginStatusChanged(false);

break;

case FacebookLoginStatus.cancelledByUser:

onLoginStatusChanged(false);

break;

case FacebookLoginStatus.loggedIn:

var graphResponse = await http.get(

Uri.parse('https://graph.facebook.com/v2.12/me?fields=name,first_name,last_name,email,picture.height(200)&access_token=${facebookLoginResult

.accessToken.token}'));

var profile = json.decode(graphResponse.body);

print(profile.toString());

onLoginStatusChanged(true, profileData: profile);

break;

}

_displayUserData(profileData) {

return Column(

mainAxisSize: MainAxisSize.min,

children: <Widget>[

Container(

height: 200.0,

width: 200.0,

decoration: BoxDecoration(

shape: BoxShape.rectangle,

image: DecorationImage(

fit: BoxFit.fill,

image: NetworkImage(

profileData['picture']['data']['url'],

SizedBox(height: 28.0),

Text(

"Name: ${profileData['name']}",

style: TextStyle(

fontSize: 20.0,

Text(

"Email: ${profileData['email']}",

style: TextStyle(

fontSize: 20.0,

ElevatedButton(

child: Text("Logout"),

onPressed: () => facebookLogin.isLoggedIn

.then((isLoggedIn) => isLoggedIn ? _logout() : {}),

)

);

}

_displayLoginButton() {

return ElevatedButton(

child: Text("Login with Facebook"),

onPressed: () => loginButtonClicked(),

);

}

_logout() async {

await facebookLogin.logOut();

onLoginStatusChanged(false);

print("Logged out");

}

Finally, run your code and check the result.

Thanks for reading 🙂

For more interesting blogs check out here – https://mobikul.com/blog/

Facebook login flutter

Shikha Melkani 28 April 2023

. . .

Discuss on Helpdesk

Facebook Sign in Flutter

Android Integration:

iOS Integration:

Flutter Code:

Leave a Comment Cancel Reply

Message Sent!