Using Shared Preferences Package to store user's favorite items, but it does not work

Question

Here is where user selects an item as favorite:

class ItemCard extends StatefulWidget {
    ValueKey key;
  ItemCard(this.key) : super(key: key);


  @override
  State<ItemCard> createState() => _ItemCardState();
}

class _ItemCardState extends State<ItemCard> {
  late SharedPreferences pref;
  List<String> favs = [];
  getPref() async {
    pref = await SharedPreferences.getInstance();
    setState(() {
      favs = pref.getStringList('favorited') ?? [];
    });
  }

  @override
  void didChangeDependencies() {
   
    getPref();
    super.didChangeDependencies();
  }

  @override
  Widget build(BuildContext context) {
    final item = Provider.of<Item>(context, listen: false);
    bool isFav = favs.any((element) => element == item.id);
    if (isFav && item.isFavorite == false) {
      item.toggleFavoriteStatus();
    }
 
    return Directionality(
          ///some code
                Consumer<Item>(
                  builder: (ctx, item, child) => InkWell(
                    onTap: () async {
                      List<String> favoritedItems = [];
                      favoritedItems
                          .addAll(pref.getStringList('favorited') ?? []);
                      if (isFav == true) {
                        favoritedItems
                            .removeWhere((element) => element == item.id);
                        pref.setStringList(
                            'favorited', [...favoritedItems, item.id as String]);
                        print('item.id: ${item.id}');
                      }
                      item.toggleFavoriteStatus();
                    },
                    child: Container(
                      width: 40,
                      height: 40,
                      decoration: const BoxDecoration(
                        shape: BoxShape.circle,
                        color: Colors.white60,
                      ),
                      child: Center(
                        child: Icon(item.isFavorite ? Icons.favorite : Icons.favorite_border, color: Colors.white,),
                      ),
                    ),
                  ),
                ),
              ],
            ),
          
    );
  }
}

It is the code for Favorite Items Screen:

import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';
import 'package:provider/provider.dart';
import '../provider/items.dart';
import '../widget/itemCard.dart';

class FavoritesScreen extends StatefulWidget {
  const FavoritesScreen({Key? key}) : super(key: key);
  static const routeName = '/Favorites';
  @override
  _FavoritesScreenState createState() => _FavoritesScreenState();
}

class _FavoritesScreenState extends State<FavoritesScreen> {
  late SharedPreferences pref;
  List<String> favoriteItemsId = [];
  getPref() async {
    pref = await SharedPreferences.getInstance();
    setState(() {
      favoriteItemsId = pref.getStringList('favorited') ?? [];
      print("/////////////////////ssssssssssssdddddddddddddsssssssgffgg" +
          pref.getStringList('favorited').toString());
    });
  }

  @override
  initState() {
    
    getPref();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    final favoriteItems = Provider.of<Items>(context).items;
    return Directionality(
      textDirection: TextDirection.rtl,
      child: Scaffold(
        body: favoriteItemsId.isEmpty
            ? const Center(
                child: Text('Favorites!'),
              )
            : GridView.builder(
                itemBuilder: (ctx, index) {
                  bool fav = favoriteItemsId
                      .any((element) => element == favoriteItems[index].id);
                  return fav
                      ? ChangeNotifierProvider.value(
                          value: favoriteItems[index],
                          child: ItemCard(
                            ValueKey(favoriteItems[index].id),
                          ),
                        )
                      : Container();
                },
                itemCount: favoriteItems.length,
                gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 2,
                  crossAxisSpacing: 8,
                  mainAxisSpacing: 8,
                ),
              ),
      ),
    );
  }
}

And here is the Item class:

class Item with ChangeNotifier {
  final String? title;
  final String? author;
  final String? id;
  final String? category;
  final String? content;
  final String? startColor;
  final String? endColor;
  bool isFavorite;
  Item({
    @required this.title,
    @required this.author,

    @required this.id,
    @required this.category,
    @required this.content,
    @required this.startColor,
    @required this.endColor,
    this.isFavorite = false,

  });
  void toggleFavoriteStatus() {
    isFavorite = !isFavorite;
    notifyListeners();
  }
}

Answer 1

setStringList() is a future. You should await it as follow :

await pref.setStringList('favorited', [...favoritedItems, item.id as String]);

Answer 2

Create a new common preference class like this and use it as per your needs.

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

Preferences preferences = Preferences();

var title = "Preferences";

class Preferences {

  static Preferences? _instance;

  Preferences._() {}

  factory Preferences() {
    if (_instance == null) {
      _instance = new Preferences._();
    }
    // since you are sure you will return non-null value, add '!' operator
    return _instance!;
  }

  SharedPreferences? _prefs;

  Future<SharedPreferences> get prefs async {
    if (_prefs != null) return _prefs!;

    _prefs = await SharedPreferences.getInstance();
    return _prefs!;
  }


  Future<bool> saveBool(String key, bool value) async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    return prefs.setBool(key, value);
  }

  Future<bool> getBool(String key, bool defValue) async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    return prefs.getBool(key) ?? defValue;
  }


  Future<bool> saveString(String key, String value) async {
    final pref = await prefs;
    return pref.setString(key, value);
    ///////////// OR
    //SharedPreferences prefs = await SharedPreferences.getInstance();
    //return  prefs.setString(key, value);
  }

  Future<String> getString(String key, String defValue) async {
    final pref = await prefs;
    return pref.getString(key) ?? defValue;
    ///////////// OR
    //SharedPreferences prefs = await SharedPreferences.getInstance();
    //return prefs.getString(key) ?? defValue;
  }

  Future<bool> saveJson(String key, dynamic value) async {
    final pref = await prefs;
    return pref.setString(key, json.encode(value.toJson()));
  }

  Future<dynamic> getJson(String key, dynamic defValue) async {
    final pref = await prefs;
    return json.decode(pref.getString(key)!) ?? defValue;
  }

  Future<bool> saveInt(String key, int value) async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    return prefs.setInt(key, value);
  }

  Future<int> getInt(String key, int value) async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    return prefs.getInt(key) ?? value;
  }

  Future<bool> saveDouble(String key, double value) async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    return prefs.setDouble(key, value);
  }

  Future<double> getDouble(String key, double value) async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    return prefs.getDouble(key) ?? value;
  }

  Future<bool> saveStringList(String key, List<String> value) async {
    final pref = await prefs;
    return pref.setStringList(key, value);
  }

  Future<List<String>> getStringList(String key, List<String> value) async {
    final pref = await prefs;
    return pref.getStringList(key) ?? value;
  }

  Future<bool> setMap(String tag, Map<String, dynamic> data) async {
    SharedPreferences sharedPreferences = await SharedPreferences.getInstance();
    return sharedPreferences.setString(tag, jsonEncode(data));
  }

  Future<Map<String, dynamic>> getMap(String tag) async {
    SharedPreferences sharedPreferences = await SharedPreferences.getInstance();
    return jsonDecode(sharedPreferences.getString(tag) ?? '{}');
  }

  Future<bool> setList(String tag, List<dynamic> data) async {
    SharedPreferences sharedPreferences = await SharedPreferences.getInstance();
    return sharedPreferences.setString(tag, jsonEncode(data));
  }

  Future<List<dynamic>> getList(String tag) async {
    SharedPreferences sharedPreferences = await SharedPreferences.getInstance();
    return jsonDecode(sharedPreferences.getString(tag) ?? '[]');
  }

  Future clearPref() async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    prefs.clear();
  }

  Future removeValues(String key) async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    prefs.remove(key);
  }
}