Previously we have seen how to use Google Firebase login in Flutter. Here we will see how to Flutter Facebook login.
As usual first create a flutter app, and then isntall the plugin flutter_facebook_auth
cupertino_icons: ^1.0.2
flutter_facebook_auth:After that, go to Facebook developer and create an app. Click the link below to do it.
https://developers.facebook.com/
Follow the video to create an app with Facebook developer account.
Android settings
For internet permission and not using ads in the app right before <application> tag
<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="com.google.android.gms.permission.AD_ID" tools:node="remove"/>
<!-- add the above two line -->
<application
android:label="flutter_facebook_auth_project"
android:name="${applicationName}"
android:icon="@mipmap/ic_launcher">
...................................................................We need to add, activity tag right before </application>
...................................................
<!-- facebook configs -->
<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/facebook_client_token"/>
<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>
</application>So your complete AndroidManifest.xml file would look like this
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.facebooktest"
xmlns:tools="http://schemas.android.com/tools"
>
<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="com.google.android.gms.permission.AD_ID" tools:node="remove"/>
<application
android:label="flutter_facebook_auth_project"
android:name="${applicationName}"
android:icon="@mipmap/ic_launcher">
<activity
android:name=".MainActivity"
android:exported="true"
android:launchMode="singleTop"
android:theme="@style/LaunchTheme"
android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
android:hardwareAccelerated="true"
android:windowSoftInputMode="adjustResize">
<!-- Specifies an Android theme to apply to this Activity as soon as
the Android process has started. This theme is visible to the user
while the Flutter UI initializes. After that, this theme continues
to determine the Window background behind the Flutter UI. -->
<meta-data
android:name="io.flutter.embedding.android.NormalTheme"
android:resource="@style/NormalTheme"
/>
<intent-filter>
<action android:name="android.intent.action.MAIN"/>
<category android:name="android.intent.category.LAUNCHER"/>
</intent-filter>
</activity>
<!-- Don't delete the meta-data below.
This is used by the Flutter tool to generate GeneratedPluginRegistrant.java -->
<meta-data
android:name="flutterEmbedding"
android:value="2" />
<!-- facebook configs -->
<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/facebook_client_token"/>
<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>
</application>
</manifest>
All you need to change is the package name based on your package.
You need to create strings.xml file for android. It should be insdie app/src/main/res/values. Create a file name strings.xml and put the code below
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="app_name">Test App</string>
<string name="facebook_app_id">1073933219918761</string>
<string name="fb_login_protocol_scheme">fb1073933219918761</string>
</resources>In the above code you need to replace the name and ID with your own name and ID.
iOS settings
iOS settings are relatively simple. Just make changes in the Info.plist file. Put the code below
<key>CFBundleURLTypes</key>
<array>
<dict>
<key>CFBundleURLSchemes</key>
<array>
<string>fb1073933219918761</string>
</array>
</dict>
</array>
<key>FacebookAppID</key>
<string>1073933219918761</string>
<key>FacebookClientToken</key>
<string>CLIENT-TOKEN</string>
<key>FacebookDisplayName</key>
<string>Test App</string>Put the above code inside Info.plist right after <dict> tag. In the above code you need to replace the name and ID with your own name and ID.
Core methods of Facebook
There are two functions those are particularly useful for flutter facebook login.
⊕ FacebookAuth.instance.login
⊕ FaecbookAuth.instance.logout
They are just like Firebase Google login and logout method.
We have used a boolean _isLoggedIn to store user login status. It becomes true once we get Facebook permission to login after clicking on the ElevatedButton.
At the same time we save the user data in a Map _userObj. Once we log out we set the map to empty one and also set _isloggedIn to false.
Reqeuest login
Center(
child: ElevatedButton(
child: Text("Login with Facebook"),
onPressed: () async {
FacebookAuth.instance.login(
permissions: ["public_profile", "email"]).then((value) {
FacebookAuth.instance.getUserData().then((userData) async {
setState(() {
_isLoggedIn = true;
_userObj = userData;
});
});
});
},
),
)Show user data
Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(_userObj["name"]),
Text(_userObj["email"]),
TextButton(
onPressed: () {
FacebookAuth.instance.logOut().then((value) {
setState(() {
_isLoggedIn = false;
_userObj = {};
});
});
},
child: Text("Logout"))
],
)The complete code
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_facebook_auth/flutter_facebook_auth.dart';
void main() => runApp(MaterialApp(home: HomePage(),));
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
bool _isLoggedIn = false;
Map _userObj = {};
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("DBestech"),
),
body: Container(
width: MediaQuery.of(context).size.width,
child: _isLoggedIn
? Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
CachedNetworkImage(
height: 200,
width: 200,
fit: BoxFit.cover,
imageUrl:_userObj["picture"]["data"]["url"],
errorWidget: (context, url, error) => Icon(Icons.error_outline),
),
// Image.network(_userObj["picture"]["data"]["url"]),
Text(_userObj["name"]),
Text(_userObj["email"]),
TextButton(
onPressed: () {
FacebookAuth.instance.logOut().then((value) {
setState(() {
_isLoggedIn = false;
_userObj = {};
});
});
},
child: Text("Logout"))
],
)
: Center(
child: ElevatedButton(
child: Text("Login with Facebook"),
onPressed: () async {
FacebookAuth.instance.login(
permissions: ["public_profile", "email"]).then((value) {
FacebookAuth.instance.getUserData().then((userData) async {
setState(() {
_isLoggedIn = true;
_userObj = userData;
});
});
});
},
),
),
),
);
}
}
