CODEWITHSUNDEEP
flutterasync-await
Jason O.
Jason O.

Reputation: 3310

Shared_Preferences for Flutter Web?

Shared_preferences (https://pub.dev/packages/shared_preferences) doesn't seem to work for Flutter for Web.

I have the following function that's called when a button is pressed.

 getEmail() async {
    print("reached 1st line");
    SharedPreferences prefs = await SharedPreferences.getInstance();
    print("reached 2nd line");
    String _confirmedEmail = prefs.getString('_confirmedEmail') ?? "";
)

It prints "reached 1st line" but not "reached 2nd line", which means the program doesn't go past the await statement. Interestingly I don't get any error either. It seems to just ignore the rest of the function after the await statement.

What is the best alternative to store shared preferences in Flutter for Web?

Upvotes: 19

Views: 21604

Answers (6)

shree bhagwat
shree bhagwat

Reputation: 480

Now the latest shared_preference package includes web support. But if you run on debug web mode you will see that the shared preference is not working on the web.

The reason is that Flutter Web runs on a random port every time and cannot recollect the shared or stored data.

The best way to test this is to run the flutter app on the web twice and check the URL it will show different ports always.

localhost:5050/#/

To solve this issue force flutter to run the app on the same port.

you can do this by adding a port while running the flutter app on the web from a terminal like this.

flutter run -d chrome --web-hostname localhost --web-port 5050

Or you can add the port in the lauch.json file of VS code like this.

"version": "0.2.0",
"configurations": [
    {
        "name": "appname",
        "request": "launch",
        "type": "dart",
        "args": ["--web-port", "5050"]
    },

This will help you to maintain the session and also retrieve the data.

Upvotes: 17

Tarun Jain
Tarun Jain

Reputation: 679

In latest version of shared_prefs, flutter supports web by default

SharedPreferences pref = await SharedPreferences.getInstance();

 //for setting values locally:
await pref.setString("token", myJWTToken);

//for getting values: 
dynamic token = pref.getString("token");

but still if you are looking for alternative then you can use flutter_session package for almost simillar purpose.

//for setting values locally:
await FlutterSession().set("token", myJWTToken);

//for getting values: 
dynamic token = await FlutterSession().get("token");

Upvotes: -1

Igor Kharakhordin
Igor Kharakhordin

Reputation: 9923

shared_preferences are not supposed to work with flutter web, that's why value of instance never returns. For this purpose, you can use any key-value stores instead, for example, sembast

UPD: the package supports web now since version 0.5.6

Upvotes: 4

Vadim Popov
Vadim Popov

Reputation: 772

Great news, from version 0.5.6 shared_prefs flutter supports web by default

Now it's includes shared_preferences for web

Your code should work without changes, just update dependency in pubspec.yaml

dependencies:
 shared_preferences: ^0.5.6

Upvotes: 29

uberchilly
uberchilly

Reputation: 179

I think it is supported now due to this. It depends on shared_preferences_web image from pub dev

Upvotes: 1

Enzo Lizama
Enzo Lizama

Reputation: 1315

You probably check the tags when you search for a library in pub.dev.

For the web the best way to implement that is implementing cache for web and dcache for implement that using flutter_web. 

import 'package:dcache/dcache.dart';

void main() {
  Cache c = new SimpleCache(storage: new SimpleStorage(size: 20));

    c.set("key", 42);
    print(c.get("key")); // 42
    print(c.containsKey("unknown_key")); // false
    print(c.get("unknown_key")); // nil
}

As you can see, is very similar to shared_preferences for Flutter.

Hope this could help.

Upvotes: 0

Related Questions