Flutter Facebook Login with null safety

To implement this in flutter you need to follow certain steps with in the app in order to make sure that things are correctly setup

Add this package into your pubspec.yaml this is the link you can checkout the documentation here.

flutter_facebook_auth: ^6.0.4

flutter_facebook_auth | Flutter Package

flutter_facebook_auth | Flutter Package

Import the library inside the widget where you want to implement facebook login.

import 'package:flutter_facebook_auth/flutter_facebook_auth.dart';

Before we can just start logging in, there are a few steps that are required for logging in Facebook.

Facebook :

1. First of all we need to create the app in facebook developer account. If you have a Facebook account then it will take 2 minutes to set up things. This is how it looks but if you don’t have created any app then you’ll need to create the app.

2. Now click on this create app and select the option which suits you best. This is what it looks like. I have selected a business purpose.

3. After when you selected the option click on continue to move next then add the mail and choose the app purpose and create the app.

Once your app is created this is how your dashboard will look like.

Android Setup for facebook:

1. Select android from the options given below as shown in picture.

2. Now select the android and fill all the requirements and this is how it will look like. You need to fill option 3 and 4 leave the rest we will do it later.

3. Add your package name here just like I did and click save and continue.

4. Now in point 4 you need to generate the hash key. There are two types of hash key. Debug mode hash key and release mode hash key. The method that is suggested in facebook documentation is not going to work so please follow me the way i am doing it.

Please run your project on the device one it’s running in, then go to the build folder via your project terminal and use this command just like shown in the screenshoot. Now copy the SHA-1.

keytool -printcert -jarfile app-debug.apk

Now open this website and paste the SHA-1 Key here and remove the collon and then select HEX to convert SHA-1 key to has key. Now finally hash key has been generated, copy the hash key and paste it setting then save and then press contine.

Base64 Encode

Base64 online encode functionemn178.github.io

5. In point 5 please enable the sign in.

6. Now go to the setting that appears at the left side and select the basic setting and this is how it will look like. In your basic setting add the app icon and privacy policy url as just shown below in the image.

7. Now inside your project go /android/app/src/main/res/values/string.xml and create this file and add your app key and secret key that are shown above in the screenshot. This is how it looks like.

8. Now go to your app level build.gradle file and add the facebook sdk dependency.

dependencies {
    implementation 'com.android.support:multidex:1.0.3'
    implementation 'com.facebook.android:facebook-login:11.1.0'
}

9. Now go to your manifest file, add internet permission and the following meta data which supports the latest sdk. If you don’t follow the way I am doing it then you will facebook error like this plugin didn’t exist.

<uses-permission android:name="android.permission.INTERNET"/>
<activity
    android:name="com.facebook.FacebookActivity"
    android:configChanges="keyboard|keyboardHidden|screenLayout|screenSize|orientation"
    android:label="@strings/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="@strings/fb_login_protocol_scheme" />
    </intent-filter>
</activity>
<meta-data android:name="com.facebook.sdk.ApplicationId" android:value="@string/facebook_app_id"/>
<meta-data android:name="com.facebook.sdk.ClientToken" android:value="@string/fb_login_protocol_scheme"/>

IOS Setup for facebook:

Go to you info.plish file and copy the bundle identifier and paste it here to setup the ios just like shown in the screenshot and press save and continue.

2. After this go to your info.plis file and add the following code. Do remember please replace the app id here with your app id.

<key>LSApplicationQueriesSchemes</key>
<array>
  <string>fbapi</string>
  <string>fbapi20130214</string>
  <string>fbapi20130410</string>
  <string>fbapi20130702</string>
  <string>fbapi20131010</string>
  <string>fbapi20131219</string>
  <string>fbapi20140410</string>

  <string>fbapi20140116</string>
  <string>fbapi20150313</string>
  <string>fbapi20150629</string>
  <string>fbapi20160328</string>
  <string>fbauth</string>
  <string>fb-messenger-share-api</string>
  <string>fbauth2</string>
  <string>fbshareextension</string>
</array>


<key>CFBundleURLTypes</key>

<array>
  <dict>
    <key>CFBundleURLSchemes</key>

    <array>
      <string>fb272140207638535</string>
    </array>
  </dict>
</array>
<key>FacebookAppID</key>
<string>272140207638535</string>
<key>FacebookDisplayName</key>
<string>Surglkey</string>
<key>LSApplicationQueriesSchemes</key>
<array>
  <string>fbapi</string>
  <string>fb-messenger-share-api</string>
  <string>fbauth2</string>
  <string>fbshareextension</string>
</array>

And we are done for the iOS part.

Let’s write the code to implement the facebook login for ios and android create the function name fbLogin and write the code given below.

You can call this function where you have created the facebook login button.

Facebook Login:

Future<void> fbLogin()async{
  try{


    final LoginResult result = await FacebookAuth.instance.login(

    ); // by default we request the email and the public profile


    if (result.status == LoginStatus.success) {
      // you are logged

      final AccessToken accessToken = result.accessToken!;

      final userData = await FacebookAuth.i.getUserData(

      );
      print(userData['name']);
    }

  }catch(e){

    print(e);


  }
}

Facebook Logout:

Future<void> fbLogout()async{
  await FacebookAuth.instance.logOut();
  setState(() {});
}

Completed source code:

class DumyScreen extends StatefulWidget {
  const DumyScreen({Key? key}) : super(key: key);

  @override
  _DumyScreenState createState() => _DumyScreenState();
}

class _DumyScreenState extends State<DumyScreen> {

  Future<void> fbLogin()async{
    try{


      final LoginResult result = await FacebookAuth.instance.login(

      ); // by default we request the email and the public profile


      if (result.status == LoginStatus.success) {
        // you are logged

        final AccessToken accessToken = result.accessToken!;

        final userData = await FacebookAuth.i.getUserData(

        );
        print(userData['name']);
      }

    }catch(e){

      print(e);


    }
  }

  Future<void> fbLogout()async{
    await FacebookAuth.instance.logOut();
    setState(() {});
  }




  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
       child: MaterialButton(
         color: Colors.blue,

         onPressed: (){
           fbLogin();
           //  requestPermission(Permission.storage) ;
         },
         child: Text('Facebook Login'),
       ),
      ),
    );
  }
}

Thank you so much. If it helps please do give your feedback