Unhandled Exception: Converting object to an encodable object failed: Instance of 'LoginModel'

Question

Am still learning and understanding the working of flutter, I am trying to save json string whenever a user logins in for the First time, and use the ID and token to call and interact with different API endpoints. Whenever I try to save the json content to Shared Preference I end with error

Unhandled Exception: Converting object to an encodable object failed: Instance of 'LoginModel'

My LoginModel

import 'dart:convert';

LoginModel loginModelFromJson(String str) => LoginModel.fromJson(json.decode(str));

String loginModelToJson(LoginModel data) => json.encode(data.toJson());

class LoginModel {
  LoginModel({
    this.id,
    this.username,
    this.email,
    this.roles,
    this.userid,
    this.surname,
    this.firstname,
    this.telephoneno,
    this.whatsappno,
    this.active,
    this.studyrole,
    this.tokenType,
    this.accessToken,
  });

  int id;
  String username;
  String email;
  List<String> roles;
  String userid;
  String surname;
  String firstname;
  String telephoneno;
  String whatsappno;
  int active;
  String studyrole;
  String tokenType;
  String accessToken;

  factory LoginModel.fromJson(Map<String, dynamic> json) => LoginModel(
    id: json["id"],
    username: json["username"],
    email: json["email"],
    roles: List<String>.from(json["roles"].map((x) => x)),
    userid: json["userid"],
    surname: json["surname"],
    firstname: json["firstname"],
    telephoneno: json["telephoneno"],
    whatsappno: json["whatsappno"],
    active: json["active"],
    studyrole: json["studyrole"],
    tokenType: json["tokenType"],
    accessToken: json["accessToken"],
  );

  Map<String, dynamic> toJson() => {
    "id": id,
    "username": username,
    "email": email,
    "roles": List<dynamic>.from(roles.map((x) => x)),
    "userid": userid,
    "surname": surname,
    "firstname": firstname,
    "telephoneno": telephoneno,
    "whatsappno": whatsappno,
    "active": active,
    "studyrole": studyrole,
    "tokenType": tokenType,
    "accessToken": accessToken,
  };
}

how am trying to save the Json to shared pref when user clicks on the login button

login(username, password) async {

  SharedPref sharedPref = SharedPref();
  LoginModel userSave = LoginModel();

  final String url = "http://21.76.45.12:80/data/api/auth/signin"; // iOS
  final http.Response response = await http.post(
    url,
    headers: <String, String>{
      'Content-Type': 'application/json; charset=UTF-8',
    },
    body: jsonEncode(<String, String>{
      'username': username,
      'password': password,
    }),
  );

  print(response.body);
  sharedPref.save("user", userSave);

 
}

My Login button Widget

RoundedButton(
                text: "LOGIN",
                press: () async {
                  if (_formKey.currentState.validate()) {
                    progressDialog.show();
                    await login(
                      username,
                      password,
                    );
                    SharedPreferences prefs =
                        await SharedPreferences.getInstance();
                    String token = prefs.getString("accessToken");
                    loadSharedPrefs();
                    print(token);
                    // ignore: null_aware_in_condition
                    if (token == null) {
                      progressDialog.hide();
                      showAlertsDialog(context);
                      // ignore: null_aware_in_condition
                    } else {
                      progressDialog.hide();
                      showAlertzDialog(context);
                    }
                  }
                },
              ),

whenever I try to load the preference I get no data

loadSharedPrefs() async {
    try {
      LoginModel user = LoginModel.fromJson(await sharedPref.read("user"));
      Scaffold.of(context).showSnackBar(SnackBar(
          content: new Text("Loaded!"),
          duration: const Duration(milliseconds: 500)));
      setState(() {
        userLoad = user;
      });
    } catch (Excepetion) {
      Scaffold.of(context).showSnackBar(SnackBar(
          content: new Text("Nothing found!"),
          duration: const Duration(milliseconds: 500)));
    }
  }

My SharedPref class

class SharedPref {
  read(String key) async {
    final prefs = await SharedPreferences.getInstance();
    return json.decode(prefs.getString(key));
  }

  save(String key, value) async {
    final prefs = await SharedPreferences.getInstance();
    prefs.setString(key, json.encode(value));
  }

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

what am I doing wrong such that the JSON is not being saved to shared prefs? Thank you for the help

Answer 1

You are not parsing the json anywhere in your code. You are creating an empty object using:

LoginModel userSave = LoginModel();

Which contains null values for the properties and that's why you are getting those exceptions. You want to parse the json and create the object using:

LoginModel userSave = loginModelFromJson(response.body);
sharedPref.save("user", userSave);