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
Comments
Post a Comment