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

In this tutorial, we have learned how to integrate Google Login in Flutter with BLoC state management. We have created a BLoC to handle the authentication state of the user, used it in the login screen to build the UI, and tested the application. The BLoC pattern provides a clean and scalable way to manage the state of an application, and it is a recommended approach for large and complex Flutter applications.