Integrating Google Login in Flutter with BLoC State Management
Flutter is a popular mobile app development framework that allows developers to build high-performance, cross-platform apps for iOS and Android. One of the key features of Flutter is its ability to handle state management, which is essential for building robust and scalable apps.
In this tutorial, we will explore how to integrate Google Login in
Flutter using BLoC state management. BLoC (Business Logic Components) is a
popular state management pattern in Flutter that uses streams and sinks to
manage the flow of data in an application. In this tutorial, we will see how to
use BLoC to manage the authentication state of the user in our application.
Step 1: Install the Required Packages
To get started, we need to install the required packages, including
the google_sign_in package, which provides the necessary classes and functions
to implement Google Sign-In in Flutter, and the flutter_bloc package, which
provides the core components of the BLoC architecture.
To install these packages, open your terminal and run the following
command:
flutter pub get
Step 2: Create the BLoC
The next step is to create the BLoC that will manage the authentication
state of the user. To do this, create a new file in your project called auth_bloc.dart
and paste the following code:
import
'dart:async';
import 'package:bloc/bloc.dart';
import 'package:google_sign_in/google_sign_in.dart';
enum AuthEvent { signIn, signOut }
class AuthBloc extends Bloc<AuthEvent, GoogleSignInAccount> {
final GoogleSignIn
_googleSignIn = GoogleSignIn();
@override
GoogleSignInAccount get
initialState => null;
@override
Stream<GoogleSignInAccount> mapEventToState(AuthEvent event)
async* {
switch (event) {
case AuthEvent.signIn:
await
_googleSignIn.signIn();
final user =
_googleSignIn.currentUser;
yield user;
break;
case AuthEvent.signOut:
await
_googleSignIn.signOut();
yield null;
break;
}
}
}
In the above code, we are using the Bloc class from the flutter_bloc
package to create our BLoC. The Bloc class takes two type parameters: the first
is the type of events, and the second is the type of the state. In our case,
the events are of type AuthEvent, and the state is of type GoogleSignInAccount.
The initialState property is used to specify the initial state of the
BLoC, and the mapEventToState method is used to map the events to the state. In
our case, we are using a switch statement to handle the two possible events: signIn
and signOut. When the signIn event is dispatched, we use the GoogleSignIn class
to sign in the user, and when the signOut event is dispatched, we sign out the
user.
Step 3: Create the Login Screen
Now that we have created the BLoC, we can use it in our login screen
to handle the authentication state of the user. To do this, create a new file
in your project called login_screen.dart and paste the following code:
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:google_sign_in/google_sign_in.dart';
import 'auth_bloc.dart';
class LoginScreen extends StatelessWidget {
@override
Widget build(BuildContext
context) {
return Scaffold(
body:
BlocProvider<AuthBloc>(
create: (context) =>
AuthBloc(),
child: Center(
child: Column(
mainAxisAlignment:
MainAxisAlignment.center,
children:
<Widget>[
RaisedButton(
onPressed: () {
BlocProvider.of<AuthBloc>(context).add(AuthEvent.signIn);
},
child: Text('Sign In with Google'),
),
RaisedButton(
onPressed: () {
BlocProvider.of<AuthBloc>(context).add(AuthEvent.signOut);
},
child:
Text('Sign Out'),
),
BlocBuilder<AuthBloc, GoogleSignInAccount>(
builder:
(context, user) {
if (user ==
null) {
return
Text('Not signed in');
}
return Text(
'Signed in as:
${user.displayName}',
);
},
),
],
),
),
),
);
}
}
In the above code, we are using the BlocProvider widget from the flutter_bloc
package to provide the AuthBloc to the child widgets. We also use the BlocBuilder
widget to build the UI based on the authentication state of the user. The BlocBuilder
widget takes two type parameters: the first is the type of the BLoC, and the
second is the type of the state. In our case, the BLoC is of type AuthBloc, and
the state is of type GoogleSignInAccount.
In the BlocBuilder widget, we are using the builder property to build
the UI based on the user state. If the user is not signed in, we display the
message "Not signed in". If the user is signed in, we display the
message "Signed in as: [user name]"
Step 4: Add the Login Screen to the Main Screen
The last step is to add the login screen to the main screen of our
application. To do this, open the main.dart file and paste the following code:
import 'package:flutter/material.dart';
import 'login_screen.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext
context) {
return MaterialApp(
title: 'Google Login in
Flutter',
home: LoginScreen(),
);
}
}
In the above code, we are using the `MaterialApp` widget to create the
main screen of our application and setting the `home` property to
`LoginScreen`.
Step 5: Test the Application
Now that we have completed the implementation of the Google Login with
BLoC in Flutter, we can test it by running the application. To run the
application, press the play button in the IDE or use the command `flutter run`
in the terminal. If everything is set up correctly, you should see the login
screen with two buttons: "Sign In with Google" and "Sign
Out".
When you click the "Sign In with Google" button, the Google
sign-in process will start, and once you have successfully signed in, you
should see the message "Signed in as: [user name]" displayed on the
screen. If you click the "Sign Out" button, you will be signed out,
and the message "Not signed in" will be displayed.
Congratulations! You have successfully integrated Google Login in Flutter
with BLoC state management.
Conclusion
Comments
Post a Comment