flutter : How to use shared preferences to keep user logged in - flutter

Question

I want to keep the user logged in after the user successfully logsin in flutter. I am using a REST API to retrieve the user name and password of the user. But I want to save those details so that the user can stay logged in. My current situation is i can successfully log the user in but when i restart the app i have to login again so i need to save the details of the user in a shared preference so that the user can stay logged for the entire session until logout.But i am unable to do that so please help me with it. Thanks in advance
Login.dart
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Color.fromRGBO(3, 9, 23, 1),
body: Container(
padding: EdgeInsets.only(
top: 100,
right: 30,
left: 30,
),
child: SingleChildScrollView(
child: Form(
key: _formKey,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
FadeAnimation(
1.2,
Container(
padding: EdgeInsets.all(70.0),
margin: EdgeInsets.only(bottom: 50.0),
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage(
'assets/images/trakinglogo.png'))),
)),
SizedBox(
height: 30,
),
FadeAnimation(
1.5,
Container(
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.white),
child: Column(
children: <Widget>[
Container(
decoration: BoxDecoration(
border: Border(
bottom:
BorderSide(color: Colors.grey[300]))),
child: TextFormField(
controller: _emailController,
onFieldSubmitted: (_) =>
FocusScope.of(context).nextFocus(),
textInputAction: TextInputAction.done,
validator: (value) {
if (value.isEmpty) {
return 'Email is required';
}
return null;
},
decoration: InputDecoration(
border: InputBorder.none,
hintStyle: TextStyle(
color: Colors.grey.withOpacity(.8)),
hintText: "Votre adresse mail"),
),
),
Container(
decoration: BoxDecoration(),
child: TextFormField(
controller: _passwordController,
validator: (value) {
if (value.isEmpty) {
return 'Password is required';
}
return null;
},
obscureText: _isHidden,
decoration: InputDecoration(
border: InputBorder.none,
hintStyle: TextStyle(
color: Colors.grey.withOpacity(.8)),
hintText: "Mot de passe",
suffix: InkWell(
onTap: _togglePasswordView,
child: Icon(
_isHidden
? (CommunityMaterialIcons
.eye_outline)
: (CommunityMaterialIcons.eye_off),
color: Color(0xFF939394),
SizedBox(
height: 40,
),
FadeAnimation(
1.8,
Center(
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
child: RaisedButton(
textColor: Colors.white,
color: kPrimaryColor,
child: Text("Se connecter"),
onPressed: () async {
if (_formKey.currentState.validate()) {
showDialog(
context: context,
builder: (BuildContext context) {
return Center(
child:
CircularProgressIndicator(),
);
});
await loginUser();
}
/* Navigator.push(
context,
MaterialPageRoute(
builder: (context) => MyWidget()),
);*/
// Navigator.pushNamed(context, 'Mywidget');
},
shape: new RoundedRectangleBorder(
borderRadius:
new BorderRadius.circular(30.0),
),
),
width: 250,
padding: EdgeInsets.all(15),
)
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
AlreadyHaveAnAccountCheck(
press: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) {
return SignUp();
void loginUser() async {
// if (_formKey.currentState.validate()) {
setState(() {
_isLoading = true;
});
String email = _emailController.text;
String password = _passwordController.text;
authentication.login(email, password).then((user) {
if (user != null)
Navigator.push(
context, MaterialPageRoute(builder: (context) => MyWidget()));
}).catchError((error) {
ScaffoldMessenger.of(context)
.showSnackBar(SnackBar(content: Text(error.toString())));
});
setState(() {
_isLoading = false;
});
}
and this is login function :
Future<User> login(String email, String password) async {
await checkInternet();
Map<String, String> headers = {
'Content-type': 'application/json',
'Accept': 'application/json',
};
Map<String, String> body = {'email': email, 'password': password};
var response = await http.post(Uri.parse(ApiUtil.AUTH_LOGIN),
headers: headers, body: jsonEncode(body));
switch (response.statusCode) {
case 200:
var body = jsonDecode(response.body);
var data = body['user'];
User user = User.fromJson(data);
Track track = Track.fromJson(body);
if (body['code'] == 0) {
SharedPreferences localStorage =
await SharedPreferences.getInstance();
localStorage.setInt('id', body['user']['id']);
localStorage.setString('adress', body['user']['adress']);
localStorage.setString('phone', body['user']['phone']);
localStorage.setString('access_token', body['access_token']);
localStorage.setString('user', json.encode(body['user']));
String user = localStorage.getString('user');
}
return user;
case 500:
throw ('Erreur serveur');
break;
case 400:
throw LoginFailed();
default:
throw ('connection timeout');
break;
}
}

Answer 1

Make a class AppSharedPreference and in that class make these methods:
User is your modal class.
Save User:
static saveUser(String key, User value) async {
final prefs = await SharedPreferences.getInstance();
//We cannot save custom objects.
//So json.encode is used to convert User Object to Json a string.
prefs.setString(key, json.encode(value));
}
Get User:
static readUser(String key) async {
final prefs = await SharedPreferences.getInstance();
//json.decode to convert json string back to Json Object
return json.decode(prefs.getString(key));
}
Make Sure your modal User class contains toJson method:
Map<String, String> toJson() => {
'id': Id,
'address': address,
'phone': phone,
// rest of your attributes...
};
To call the saveUser method:
await AppSharedPreference.saveUser('your_key', user);
To call the readUser method:
(make sure your modal User class contains fromJson method)
User user = User.fromJson(await AppSharedPreference.readUser('your_key'));
And after that you can check whether the user is null or not. If it is null it means there is no data and the user is not logged-in.
In case if you want to logout user you can create a method to remove the user from SharedPreference:
Remove User:
static removeUser(String key) async {
final prefs = await SharedPreferences.getInstance();
prefs.remove(key);
}
To call removeUser method:
await AppSharedPreference.removeUser('your_key');

Answer 2

You have to check if there is data in the sharedPreference at the starting of the app and then redirect users based on that. An example would be implementing this in splashscreen
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';
import 'home_page.dart';
import 'login_page.dart';
class SplashScreen extends StatefulWidget {
static const String splashRoute = '/';
#override
_SplashScreenState createState() => _SplashScreenState();
}
class _SplashScreenState extends State<SplashScreen> {
void timeToShowSplashScreenOnScreen() async {
Timer(Duration(seconds: 3), () async {
if (!mounted) return;
SharedPreferences _prefs = await SharedPreferences.getInstance();
bool isLoggedIn = _prefs.getBool("loggedIn");
if (isLoggedIn != null && isLoggedIn) {
Navigator.of(context).pushNamedAndRemoveUntil(HomePage.homePageRoute, (route) => false);
} else {
Navigator.of(context).pushNamedAndRemoveUntil(LoginPage.loginRoute, (route) => false);
}
});
}
#override
void initState() {
super.initState();
timeToShowSplashScreenOnScreen();
}
#override
Widget build(BuildContext context) {
double _width = MediaQuery.of(context).size.width;
double _height = MediaQuery.of(context).size.height;
return Scaffold(
body: Container(
width: _width,
height: _height,
child: Stack(
children: [
// Your UI for splash screen
],
),
),
);
}
}
This example uses boolean values stored in prefs but you can do similar things with strings too.