Flutter - Implementing Signing Out the User
Last Updated :
17 Apr, 2023
In this article, we can learn how to Signout the user from a flutter application. This article is a continuation of the article that explains making google signIn UI and its authentication. It is recommended to check the same before moving ahead.
Now we will implement the Sign out feature for the flutter application.
Implementation:
Follow the below steps to implement logout feature in Flutter:
Step 1: Just open your homePage.dart file.
Step 2: In Scaffold, call the floatingActionButton widget, further onpressed property called the signOut function.
Step 3: In child property, we have to give the Icon of logout, a background color is Green.
We are good to go. Now let's define the signOut function that we need.
Step 4: Now first of all make the firebaseAuth instance 'auth'.
Step 5: Above the @override , just define the function. This function will be async . Now by using auth call the signOut( ) inbuilt method.
Step 6: After that, we simply call the navigator to push the sign-up screen.
Now our updated homepage.dart file :
Dart
import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';
import 'package:googlesign/signup.dart';
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
final FirebaseAuth auth = FirebaseAuth.instance;
//signout function
signOut() async {
await auth.signOut();
Navigator.pushReplacement(
context, MaterialPageRoute(builder: (context) => SignInScreen()));
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
centerTitle: true,
backgroundColor: Colors.green,
title: Text("GEEKS FOR GEEKS"),
),
// floating Action Button using for signout ,
floatingActionButton: FloatingActionButton(
onPressed: () {
signOut();
},
child: Icon(Icons.logout_rounded),
backgroundColor: Colors.green,
),
body: Center(
child: Text("Home page"),
),
);
}
}
If we pressed the button, we log out of the application and move to the sign-in screen. But there is a problem if we again open the application without signout, we don't directly navigate to the Homepage, we have to again signIn the Application. This is the big problem.
Now let's solve this, if we create a bool variable "islogin" and make it true when we actually signed in, and make it false when we signOut the Application. Now we can check islogin value during the initializing of the application, If islogin is true we go to the home screen else to signIn screen. We can store the value in sharedPreferences.
Let's just do it now:
add shared_preferences: ^2.0.6 in pubspec yaml file.
Step 7: Create a new file shared.dart, and import the package library.
Step 8: Make a class "Share" and make two functions for saving data and reading data respectively.
Dart
import 'package:shared_preferences/shared_preferences.dart';
class Shared {
static String loginSharedPreference = "LOGGEDINKEY";
// save data
static Future<bool> saveLoginSharedPreference(islogin) async {
SharedPreferences prefs = await SharedPreferences.getInstance();
return await prefs.setBool(loginSharedPreference, islogin);
}
//fetch data
static Future getUserSharedPreferences() async {
SharedPreferences preferences = await SharedPreferences.getInstance();
return preferences.getBool(loginSharedPreference);
}
}
Now open your main.dart file, and make the following changes.
Dart
import 'package:flutter/material.dart';
import 'package:googlesign/homepage.dart';
import 'package:googlesign/share.dart';
import 'package:googlesign/signup.dart';
import 'package:firebase_core/firebase_core.dart';
void main() async {
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp(); // initializing the firebase app
runApp(GoogleSignIn()); // calling runApp
}
// google signin stateful widget
class GoogleSignIn extends StatefulWidget {
GoogleSignIn({Key? key}) : super(key: key);
@override
_GoogleSignInState createState() => _GoogleSignInState();
}
class _GoogleSignInState extends State<GoogleSignIn> {
var islogin;
checkUserLoginState() async {
await Shared.getUserSharedPreferences().then((value) {
setState(() {
islogin = value;
});
});
}
@override
void initState() {
checkUserLoginState();
super.initState();
}
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'GEEKS FOR GEEKS',
debugShowCheckedModeBanner:
false, // debug banner false that is show on corner
theme: ThemeData(
primarySwatch: Colors.cyan, // color to our app
),
home: islogin != null
? islogin
? HomePage()
: SignInScreen()
: SignInScreen(),
);
}
}
Output :
Similar Reads
Flutter - Implement SignaturePad Signatures are an integral part of various applications, from e-commerce to document management systems. Flutter offers versatile tools and libraries to implement a signature pad effortlessly within your mobile applications. In this tutorial, we'll build a simple signature pad using Syncfusion's Flu
3 min read
Flutter - Implement Status Alert In Flutter, a "status alert" typically refers to a visual feedback mechanism that informs the user about the status or outcome of a certain operation or event. The status_alert package in Flutter is a third-party package that provides an easy way to create and display such status alerts. These alert
4 min read
Flutter - Implementing Badges Badges can be used for various purposes in an application. For example, showing the number of messages, number of items in the cart, etc. In this article, we will see the implementation of badges in Flutter using the badges Flutter package. Install the library: In the pubspec.yaml file, add badges l
5 min read
Flutter - Implementing Swipe to Dismiss Feature The Swipe to dismiss feature is used by us in many mobile apps. In this article, we will create a list of items and implement a swipe to dismiss in it. When we want to dismiss the content using swipe then we can do this with the help of swipe to dismiss widget in a flutter. Generally, we use this wh
2 min read
Flutter - State Management Provider In this article, we are going to learn how state management is achieved in Flutter using providers. But before that, we need to know what a state is. As we know that everything in Flutter is a widget, and there are mainly two kinds of widgets: Stateless Widgets and Stateful Widgets. Stateless widget
8 min read