Flutter Facebook Login using BLOC Pattern.
Mobile App Development A-Z Guide
Give us a message if you’re interested in Blockchain and FinTech software development or just say Hi at Pharos Production Inc.
Or follow us on Youtube to know more about Software Architecture, Distributed Systems, Blockchain, High-load Systems, Microservices, and Enterprise Design Patterns.
Today, most mobile applications require user registration. The most popular ways today are Facebook and Google.
In this article, I want to present you a step-by-step instruction for Facebook authentication.
Step 1.
First, you need to create a new Flutter project. Let this project be called login_app.
Step 2.
It is necessary to follow the link below. The instructions for the Android application indicated 10 points. You only need to complete the first six.
Attention!!! In paragraph number 4 — adding hash keys you need to add another key. which can be generated using the following method. Link below:
In the new project, which is generated by Flutter, in the Android resource folder, there is no strings.xml file. Accordingly, it must be created manually.
After following the above instructions, the Android project should have the following form:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="app_name">Login App</string>
<string name="facebook_app_id">Facebook App ID</string>
<string name="fb_login_protocol_scheme">fbFacebook AppID</string>
</resources>The protocol log scheme is ‘fb’ + ID your facebook application.
Changes in the manifest should look like this.
Step. 3
In the pubspeck.yaml file, add the following dependencies:
dependencies:
flutter:
sdk: flutter flutter_facebook_login: ^1.1.2
rxdart: ^0.20.0
http: ^0.12.0
Step 4.
Create a LoginProvider — this class gives access to LoginBloc from anywhere in the application where an instance of the context is available.
class LoginProvider extends InheritedWidget {
final LoginBloc bloc; LoginProvider({Key key, Widget child})
: bloc = LoginBloc(),
super(key: key, child: child); @override
bool updateShouldNotify(InheritedWidget oldWidget) => true; static LoginBloc of(BuildContext context) {
return (context.inheritFromWidgetOfExactType(LoginProvider) as LoginProvider).bloc;
}
}
Step 5.
Create a LoginBloc class. In fact, this class is an analog of Model-View-ViewModel.
Use Graph Api to get information about the user profile:
Sample code is located at the link below. And don’t forget to use your
Thanks for reading.
