JsonDecoding Shared Preferences returning List instead of List

Question

I have a list contacts that stores Contact which is a type acquired from contact_services package

List<Contact> contacts = [];

and I store the List using SharedPrefrences by first jsonEncode it and then save it

void saveContacts() async{
    SharedPreferences prefs = await SharedPreferences.getInstance();
    await prefs.setString('list', jsonEncode(contacts));
}

but when I try to load the list it returns an exception type 'List<dynamic>' is not a subtype of type 'List<Contact>'

void loadList() async{
    SharedPreferences prefs = await SharedPreferences.getInstance();
    contacts = await jsonDecode(prefs.getString('list'));

}

Updated code to highlight changes :

this is the entire saveContacts function :

  void saveContacts() async{
    SharedPreferences prefs = await SharedPreferences.getInstance();
    var json = jsonEncode(contacts, toEncodable: (e) => e.toMap());
    await prefs.setString('list', jsonEncode(json));
  }

but I am receiving error : The method 'toMap' isn't defined for the type 'Object'.

contacts is just a List that stores Contact type

List<Contact> contact;

originally contact was stored in a separate folder (global) in order to be easily accessible, but this doesn't affect the outcome of the jsonEncode

Answer 1

Update:

I originally thought the problem could be solved by casting but diving into json.dart, I found the following comments:

• json.encode/jsonEncode

  /// If value contains objects that are not directly encodable to a JSON
  /// string (a value that is not a number, boolean, string, null, list or a map
  /// with string keys), the [toEncodable] function is used to convert it to an
  /// object that must be directly encodable.
  ///
  /// If [toEncodable] is omitted, it defaults to a function that returns the
  /// result of calling `.toJson()` on the unencodable object.

• JsonEncoder.convert which is internally used by jsonEncode/json.encode:

  /// Directly serializable values are [num], [String], [bool], and [Null], as
  /// well as some [List] and [Map] values. For [List], the elements must all be
  /// serializable. For [Map], the keys must be [String] and the values must be
  /// serializable.
  ///
  /// If a value of any other type is attempted to be serialized, the
  /// `toEncodable` function provided in the constructor is called with the value
  /// as argument. The result, which must be a directly serializable value, is
  /// serialized instead of the original value.

TLDR; If the value parameter contains an object, we also have to provide toEncodable if the class doesn't have toJson implementation. And since in your case you can't provide toJson implementation for the class, the only way to properly encode the object is by providing toEncodable. I've implemented an example for your understanding:

import 'dart:convert';

class Class {
  String name;
  Class(this.name);

  @override
  String toString() => name;
}

void main() {
  final list = <Class>[
    Class('a'),
    Class('b'),
    Class('c'),
  ];

  final encoded = json.encode(list, toEncodable: (c) {
    if (c is Class) {
      return {'name': c.name};
    }
  });
  print(encoded);
  
  // Save and retreive `encoded`
  
  print((json.decode(encoded) as List).map((map) {
    if (map.containsKey('name')) {
      return Class(map['name']);
    }
  }));
}

addendum: Instead of providing a custom implementation of toEncodable and creating a Contact from json, try out the toMap and fromMap already defined.

---

Original answer:

You can convert the type of list using the cast method on a List.

So first convert the decoded data using as to a List and then apply cast on it to get the desired type.

contacts = await (jsonDecode(prefs.getString('list')) as List).cast<Contact>();

Answer 2

You need to cast to Map<String, dynamic> then convert the json to your Contact. Here a working example to convert the list of Contact to json text and read it again as List of contact. (go to parseContacts function on code below).

import 'dart:convert';

class Contact {
  final String name;
  final String phone;

  Contact(this.name, this.phone);

  Contact.fromJson(Map<String, dynamic> json)
      : name = json['name'],
        phone = json['phone'];

  Map<String, dynamic> toJson() => {
        'name': name,
        'phone': phone,
      };
}

void main() {
  List<Contact> contacts = [];
  for (int i = 0; i < 10; i++) {
    contacts.add(Contact("name$i", i.toString()));
  }
  
  var jsonText = jsonEncode(contacts);
  print(jsonText);

  var contactsFromJson = parseContacts(jsonText);
  for (var item in contactsFromJson) {
    print(item.name);
  }
}

List<Contact> parseContacts(String jsonText) {
  final parsed = jsonDecode(jsonText).cast<Map<String, dynamic>>();

  return parsed.map<Contact>((json) => Contact.fromJson(json)).toList();
}

For more details, you can read the example at https://flutter.dev/docs/cookbook/networking/background-parsing#complete-example