Integrating Google Login in Flutter with Provider State Management

Flutter has gained a lot of popularity in recent years for developing beautiful, high-performance mobile applications. The Flutter framework provides a lot of tools and widgets to develop cross-platform applications with ease. One of the most common features that any mobile application should have is user authentication. In this article, we will be discussing how to integrate Google Login in Flutter using Provider State Management with a code example.

Prerequisites:

• Basic knowledge of Flutter and Dart

• A Google Firebase account

• A Flutter project setup with Firebase plugins installed

Step 1: Create a Firebase Project and Enable Google Sign-In

The first step is to create a Firebase project and enable the Google Sign-In option in the Firebase Console. To create a new Firebase project, follow these steps:

1. Go to the Firebase Console (https://console.firebase.google.com/).

2. Click on the "Add Project" button.

3. Enter a project name and select a Google account to link to the project.

4. Fill in the other required details and click on the "Create Project" button.

5. Once the project is created, go to the Authentication tab, and click on the "Sign-in Method" option.

6. In the Sign-in Method tab, enable the "Google" option and configure it with your Google API credentials.

Step 2: Create a Provider for User Management

The Provider package is a popular state management solution for Flutter. We will be using it to manage the user authentication state in our application. First, we need to create a Provider class that holds the user authentication state. Create a new file called user_provider.dart in your project and paste the following code:

import 'package:flutter/foundation.dart';

import 'package:google_sign_in/google_sign_in.dart';

class UserProvider with ChangeNotifier {

GoogleSignInAccount _user;

GoogleSignInAccount get user => _user;

set user(GoogleSignInAccount value) {

_user = value;

notifyListeners();

}

}

In the above code, we are using the GoogleSignInAccount class from the google_sign_in package to store the user account information. We are also using the ChangeNotifier mixin from the flutter package to implement a simple Provider class that can notify its listeners when its state changes.

Step 3: Implement Google Login in Flutter

Now that we have our Provider class set up, we can use it to handle the user authentication state in our Flutter application. To implement the Google Login, we will create a new screen that holds a Google Sign-In button. When the user taps the button, we will perform the Google Sign-In flow and update the user's authentication state in the Provider.

Create a new file called login_screen.dart in your project and paste the following code:

import 'package:flutter/material.dart';

import 'package:google_sign_in/google_sign_in.dart';

import 'package:provider/provider.dart';

import 'user_provider.dart';

class LoginScreen extends StatefulWidget {

@override

_LoginScreenState createState() => _LoginScreenState();

}

class _LoginScreenState extends State<LoginScreen> {

final GoogleSignIn _googleSignIn = GoogleSignIn();

Future<void> _handleSignIn() async {

try {

await _googleSignIn.signIn();

final user = _googleSignIn.currentUser; Provider.of<UserProvider>(

context, listen: false).user = user;

}

catch (error) {

print(error);

}

}

@override

Widget build(BuildContext context) {

return Scaffold(

body: Container(

alignment: Alignment.center,

child: RaisedButton(

onPressed: _handleSignIn,

child: Text('Sign in with Google'),

),

),

);

}

}

In the above code, we are using the `GoogleSignIn` class from the `google_sign_in` package to handle the Google Sign-In flow. We are also using the `Provider` package to access and update the user's authentication state stored in the `UserProvider`.

Step 4: Wrap your Application with the Provider

Finally, we need to wrap our application with the `UserProvider` so that it is available to all the screens in our application. To do this, open your `main.dart` file and paste the following code:

import 'package:flutter/material.dart';

import 'package:provider/provider.dart';

import 'login_screen.dart';

import 'user_provider.dart';

void main() {

runApp(MyApp());

}

class MyApp extends StatelessWidget {

@override

Widget build(BuildContext context) {

return ChangeNotifierProvider(

create: (context) => UserProvider(),

child: MaterialApp(

home: LoginScreen(),

),

);

}

}

In the above code, we are using the ChangeNotifierProvider widget to wrap our application with the UserProvider. The create parameter is used to create an instance of the UserProvider class, and the child parameter is used to specify the root widget of our application, which is the LoginScreen.

Step 5: Test your Google Login Integration

Now that we have completed all the steps, it's time to test our Google Login integration. Run your application in an emulator or a real device, and you should see a screen with a Google Sign-In button. When you tap the button, you should be able to sign in with your Google account and see your authentication state updated in the UserProvider.

Conclusion

In this article, we have seen how to integrate Google Login in Flutter using Provider State Management. We have also seen how to use the GoogleSignIn class from the google_sign_in package to handle the Google Sign-In flow and the UserProvider class to manage the user's authentication state in our application. This is a simple implementation, and you can extend it to handle more advanced features like storing user data in a database or handling multiple authentication providers.