How to use Shared Preferences to keep users logged in flutter?

In this blog, we will learn that How to use Shared Preferences to keep users logged in flutter?

Let’s imagine that if we are using an application after logging into the application.After using it sometimes, we quit or kill the app. Then ,when we open the app again and it asks to login again. Shit!!! It will be quite irritating to login again and again when we are opening the app.

People will avoid that application because of wastage of time on logging again and again.

Don’t worry ,.Here is the solution to this problem.And the solution is shared preference.

In this implementation, I am hoping that you have basic knowledge of shared preference.

You may also check our Flutter app development company page.

So, without wasting a single second, let’s start the stepwise code implementation to resolve this problem.

Step1:-Add the Dependency

Add the Shared Preference dependency in your pubspec.yaml file.

dependencies:
  shared_preferences: ^2.0.15

1 2	dependencies: shared_preferences: ^2.0.15

Step2:-Import the Package

After adding dependency, you can import the shared Preference package in your dart file.

import 'package:shared_preferences/shared_preferences.dart';

1	import 'package:shared_preferences/shared_preferences.dart';

Step3:-Save the credentials in Shared Preference.

When we login ,we will save our email in the shared preference and after login we will open the app again. We can check that credentials that we have saved are not empty.

In this example, we have two screens, i.e.Login screen and Home screen.If we have the email, then the app will go on the home screen, else it will go on the login screen.

Future<void> main() async{
  WidgetsFlutterBinding.ensureInitialized();
  SharedPreferences prefs =await SharedPreferences.getInstance();
  var email=prefs.getString("email");
  print(email);
  runApp(MaterialApp(
    debugShowCheckedModeBanner: false,
    home: email==null?Login():Home(),));
}

Future<void> main() async{

WidgetsFlutterBinding.ensureInitialized();

SharedPreferences prefs =await SharedPreferences.getInstance();

var email=prefs.getString("email");

print(email);

runApp(MaterialApp(

debugShowCheckedModeBanner: false,

home: email==null?Login():Home(),));

}

Step4:-Add the Login and Home screen code

Let’s make the login screen and home screen.

class Login extends StatelessWidget {
  const Login({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Login"),),
      body: Center(
        child: RaisedButton(
          color: Colors.green,
          onPressed: () async {
            SharedPreferences pref =await SharedPreferences.getInstance();
            pref.setString("email", "useremail@gmail.com");
            Navigator.pushReplacement(context, MaterialPageRoute(builder: (_){
              return Home();
            }));
          },
          child: const Text("Login",style: TextStyle(fontWeight: FontWeight.bold,color: Colors.white),),
        ),
      ),
    );
  }
}



class Home extends StatelessWidget {
  const Home({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Home"),),
      body: Center(
        child: RaisedButton(
          color: Colors.red,
          onPressed: () async {
            SharedPreferences pref = await SharedPreferences.getInstance();
            pref.remove("email");
            Navigator.pushReplacement(context, MaterialPageRoute(builder: (_){
              return Login();
            }));
          },
          child: Text("Logout",style: TextStyle(fontWeight: FontWeight.bold,color: Colors.white),),
        ),
      ),
    );
  }
}

class Login extends StatelessWidget {

const Login({Key? key}) : super(key: key);

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(title: Text("Login"),),

body: Center(

child: RaisedButton(

color: Colors.green,

onPressed: () async {

SharedPreferences pref =await SharedPreferences.getInstance();

pref.setString("email", "[email protected]");

Navigator.pushReplacement(context, MaterialPageRoute(builder: (_){

return Home();

}));

child: const Text("Login",style: TextStyle(fontWeight: FontWeight.bold,color: Colors.white),),

);

}

class Home extends StatelessWidget {

const Home({Key? key}) : super(key: key);

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(title: Text("Home"),),

body: Center(

child: RaisedButton(

color: Colors.red,

onPressed: () async {

SharedPreferences pref = await SharedPreferences.getInstance();

pref.remove("email");

Navigator.pushReplacement(context, MaterialPageRoute(builder: (_){

return Login();

}));

child: Text("Logout",style: TextStyle(fontWeight: FontWeight.bold,color: Colors.white),),

);

}

On these screens, we have login and logout buttons respectively. At the click of Login button, user email will save in share preference.And on the click on logout, email will be removed from Shared Preference.

That’s it. It was all about code implementation.Now it’s time to check the output.

Step5:-Output

You can check the output in the below video.

You can see in the video that after logging in once, we are navigating on the home screen. We do not need to login again.

Congratulations!!!! You have learned how to use Shared Preferences to keep users logged in flutter?.

For more details and methods, you can refer to the official doc on flutter here.

For more interesting blogs check out here – https://mobikul.com/blog/

Hope this blog helps you with a better understanding in

Hope this blog helps you with a better understanding of how to use Shared Preferences to keep users logged in flutter?.

Thanks for reading 🙂

flutter Shared Prefrences

Vandana Sharma

18 Jul, 2023
Updated by - Akshay Singh
30 May, 2023
Updated by - Akshay Singh

. . .

10 comments

Tandin 10 months ago

Thank you for the tutorial. It was easy to follow and was very helpful

vaibhavarora.bd73 (Moderator) 9 months ago
Thank you for the positive feedback.Your engagement and appreciation motivate us to continue creating valuable content. Stay tuned for more technical insights!

Reply

Samuel Joseph 2 years ago

Thanks , this was very simple to understand. You did a great job in simplifying the process

Akshay Singh (Moderator) 2 years ago
Hi Samuel

Thanks!
We are really very happy with your positive feedback. In further if you have any queries you can connect us at [email protected]

Reply

sujay kumar 2 years ago

really helpful mam

Akshay Singh (Moderator) 2 years ago
Hi there,
Hope you are doing well!

Thank you for your feedback we really appreciate your effort and time.

Thanks

Reply

Saif Romdhane 2 years ago

Greetings Vandana.
I just wanted to thank you for this informative article! It was simple and easy to understand.
It has helped so much in my project 🙂

Akshay Singh (Moderator) 2 years ago
Hi Saif
Thank you for sharing your feedback. We are really happy to know that it was beneficial for your project.

Thanks & Regards
Webkul Team.

Reply

Amit Badreshiya 2 years ago

Hey, Vandana
I Learn Your Shared Preferences blog and its very good to understand
Thank You…

Vandana Sharma (Moderator) 2 years ago
Thanks for the Appreciation.

Reply