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() 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"),
),
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";
static Future<bool> saveLoginSharedPreference(islogin) async {
SharedPreferences prefs = await SharedPreferences.getInstance();
return await prefs.setBool(loginSharedPreference, islogin);
}
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();
runApp(GoogleSignIn());
}
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,
theme: ThemeData(
primarySwatch: Colors.cyan,
),
home: islogin != null
? islogin
? HomePage()
: SignInScreen()
: SignInScreen(),
);
}
}
|
Output :
Similar Reads
Implementing Rest API in Flutter
Along with building a UI in Flutter, we can also integrate it with the backend. Most applications use APIs to display user data. We will use the http package, which provides advanced methods to perform operations. REST APIs use simple HTTP calls to communicate with JSON data because: It uses await
5 min read
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
State management using Redux in Flutter
State management is a crucial aspect of building dynamic and responsive applications. While building applications, we sometimes need to maintain a state between multiple screens. Here comes the part of State Management. There are different state management techniques in Flutter like GetX, Provider,
6 min read
Implementing Flutter Gauge
Flutter gauge is an information perception widget written in dart language to make a modern, interactive, and animated gauge check and is utilized to make excellent portable application user interfaces utilizing Flutter. There is an alternate style of gauge in flutter. Following are the steps to fol
4 min read
Portfolio Implementation using Flutter Web and Firebase
In this article, we’ll guide you through building a Custom Linktree-style Portfolio using Flutter Web and deploying it on Firebase. A Linktree is a powerful tool to showcase your online presence - social media, projects, or professional links - all in one sleek, responsive page. With Flutter Web, yo
15 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
Flutter - Implement a ListTile Inside a GrdiView
In this article, we are going to combine two major flutter widgets. We are going to implement a ListTile inside a GridView. Also, we are going to see the basic syntaxes of the individual widgets. A sample Image is given below to get an idea about what we are going to do in this article. Basic Syntax
4 min read