Flutter: ChangeNotifierProvider doesn't work with my MVVM architecture - json

Question

I have a complex JSON object and I already converted it to dart code using JSON to Dart plugin. I have created a View Model to call my API and update the provider. However, the provider doesn't seem to work.
The API response is successful but I get this error message ->
The following NoSuchMethodError was thrown building Builder: The getter 'replyStatus' was called on null. Receiver: null Tried calling: replyStatus
Can anyone help me to solve this issue?
Below is the code I have.
JSON to Dart Response
class UserProfile {
int replyStatus;
String replyDesc;
int debugStep;
bool hasData;
int actualDataSize;
List<ResultObjectSet> resultObjectSet;
dynamic token;
UserProfile(
{this.replyStatus,
this.replyDesc,
this.debugStep,
this.hasData,
this.actualDataSize,
this.resultObjectSet,
this.token});
UserProfile.fromJson(Map<String, dynamic> json) {
replyStatus = json['ReplyStatus'];
replyDesc = json['ReplyDesc'];
debugStep = json['DebugStep'];
hasData = json['HasData'];
actualDataSize = json['ActualDataSize'];
if (json['ResultObjectSet'] != null) {
// ignore: deprecated_member_use
resultObjectSet = new List<ResultObjectSet>();
json['ResultObjectSet'].forEach((v) {
resultObjectSet.add(new ResultObjectSet.fromJson(v));
});
}
token = json['Token'];
}
Map<String, dynamic> toJson() {
final Map<String, dynamic> data = new Map<String, dynamic>();
data['ReplyStatus'] = this.replyStatus;
data['ReplyDesc'] = this.replyDesc;
data['DebugStep'] = this.debugStep;
data['HasData'] = this.hasData;
data['ActualDataSize'] = this.actualDataSize;
if (this.resultObjectSet != null) {
data['ResultObjectSet'] =
this.resultObjectSet.map((v) => v.toJson()).toList();
}
data['Token'] = this.token;
return data;
}
}
class ResultObjectSet {
String objectName;
ObjectSet objectSet;
ResultObjectSet({this.objectName, this.objectSet});
ResultObjectSet.fromJson(Map<String, dynamic> json) {
objectName = json['ObjectName'];
objectSet = json['ObjectSet'] != null
? new ObjectSet.fromJson(json['ObjectSet'])
: null;
}
Map<String, dynamic> toJson() {
final Map<String, dynamic> data = new Map<String, dynamic>();
data['ObjectName'] = this.objectName;
if (this.objectSet != null) {
data['ObjectSet'] = this.objectSet.toJson();
}
return data;
}
}
class ObjectSet {
int userId;
String userName;
String regsterEmail;
String lastLogin;
double displayTimeZone;
int accountStatus;
int language;
List<UserCompany> userCompany;
MenuOption menuOption;
bool pnmDisableFlag;
ObjectSet(
{this.userId,
this.userName,
this.regsterEmail,
this.lastLogin,
this.displayTimeZone,
this.accountStatus,
this.language,
this.userCompany,
this.menuOption,
this.pnmDisableFlag});
ObjectSet.fromJson(Map<String, dynamic> json) {
userId = json['UserId'];
userName = json['UserName'];
regsterEmail = json['RegsterEmail'];
lastLogin = json['LastLogin'];
displayTimeZone = json['DisplayTimeZone'];
accountStatus = json['AccountStatus'];
language = json['Language'];
if (json['UserCompany'] != null) {
// ignore: deprecated_member_use
userCompany = new List<UserCompany>();
json['UserCompany'].forEach((v) {
userCompany.add(new UserCompany.fromJson(v));
});
}
menuOption = json['MenuOption'] != null
? new MenuOption.fromJson(json['MenuOption'])
: null;
pnmDisableFlag = json['PnmDisableFlag'];
}
Map<String, dynamic> toJson() {
final Map<String, dynamic> data = new Map<String, dynamic>();
data['UserId'] = this.userId;
data['UserName'] = this.userName;
data['RegsterEmail'] = this.regsterEmail;
data['LastLogin'] = this.lastLogin;
data['DisplayTimeZone'] = this.displayTimeZone;
data['AccountStatus'] = this.accountStatus;
data['Language'] = this.language;
if (this.userCompany != null) {
data['UserCompany'] = this.userCompany.map((v) => v.toJson()).toList();
}
if (this.menuOption != null) {
data['MenuOption'] = this.menuOption.toJson();
}
data['PnmDisableFlag'] = this.pnmDisableFlag;
return data;
}
}
class UserCompany {
int companyId;
String companyName;
int typeUserRoleId;
String typeUserRoleDesc;
int menuRights;
int reportRights;
ManagementCompanyRights managementCompanyRights;
ManagementCompanyRights managementUserRights;
ManagementCompanyRights managementUserRole;
ManagementCompanyRights managementFleetRights;
ManagementCompanyRights managementShipRights;
UserCompany(
{this.companyId,
this.companyName,
this.typeUserRoleId,
this.typeUserRoleDesc,
this.menuRights,
this.reportRights,
this.managementCompanyRights,
this.managementUserRights,
this.managementUserRole,
this.managementFleetRights,
this.managementShipRights});
UserCompany.fromJson(Map<String, dynamic> json) {
companyId = json['CompanyId'];
companyName = json['CompanyName'];
typeUserRoleId = json['TypeUserRoleId'];
typeUserRoleDesc = json['TypeUserRoleDesc'];
menuRights = json['MenuRights'];
reportRights = json['ReportRights'];
managementCompanyRights = json['ManagementCompanyRights'] != null
? new ManagementCompanyRights.fromJson(json['ManagementCompanyRights'])
: null;
managementUserRights = json['ManagementUserRights'] != null
? new ManagementCompanyRights.fromJson(json['ManagementUserRights'])
: null;
managementUserRole = json['ManagementUserRole'] != null
? new ManagementCompanyRights.fromJson(json['ManagementUserRole'])
: null;
managementFleetRights = json['ManagementFleetRights'] != null
? new ManagementCompanyRights.fromJson(json['ManagementFleetRights'])
: null;
managementShipRights = json['ManagementShipRights'] != null
? new ManagementCompanyRights.fromJson(json['ManagementShipRights'])
: null;
}
Map<String, dynamic> toJson() {
final Map<String, dynamic> data = new Map<String, dynamic>();
data['CompanyId'] = this.companyId;
data['CompanyName'] = this.companyName;
data['TypeUserRoleId'] = this.typeUserRoleId;
data['TypeUserRoleDesc'] = this.typeUserRoleDesc;
data['MenuRights'] = this.menuRights;
data['ReportRights'] = this.reportRights;
if (this.managementCompanyRights != null) {
data['ManagementCompanyRights'] = this.managementCompanyRights.toJson();
}
if (this.managementUserRights != null) {
data['ManagementUserRights'] = this.managementUserRights.toJson();
}
if (this.managementUserRole != null) {
data['ManagementUserRole'] = this.managementUserRole.toJson();
}
if (this.managementFleetRights != null) {
data['ManagementFleetRights'] = this.managementFleetRights.toJson();
}
if (this.managementShipRights != null) {
data['ManagementShipRights'] = this.managementShipRights.toJson();
}
return data;
}
}
class ManagementCompanyRights {
bool add;
bool edit;
bool delete;
bool fleetAssignment;
ManagementCompanyRights(
{this.add, this.edit, this.delete, this.fleetAssignment});
ManagementCompanyRights.fromJson(Map<String, dynamic> json) {
add = json['Add'];
edit = json['Edit'];
delete = json['Delete'];
fleetAssignment = json['FleetAssignment'];
}
Map<String, dynamic> toJson() {
final Map<String, dynamic> data = new Map<String, dynamic>();
data['Add'] = this.add;
data['Edit'] = this.edit;
data['Delete'] = this.delete;
data['FleetAssignment'] = this.fleetAssignment;
return data;
}
}
class MenuOption {
bool dashBoard;
bool fuelCons;
bool bunkering;
bool aMS;
bool shaftPower;
bool kpiPerformance;
bool eOM;
bool route;
bool report;
bool management;
MenuOption(
{this.dashBoard,
this.fuelCons,
this.bunkering,
this.aMS,
this.shaftPower,
this.kpiPerformance,
this.eOM,
this.route,
this.report,
this.management});
MenuOption.fromJson(Map<String, dynamic> json) {
dashBoard = json['DashBoard'];
fuelCons = json['FuelCons'];
bunkering = json['Bunkering'];
aMS = json['AMS'];
shaftPower = json['ShaftPower'];
kpiPerformance = json['KpiPerformance'];
eOM = json['EOM'];
route = json['Route'];
report = json['Report'];
management = json['Management'];
}
Map<String, dynamic> toJson() {
final Map<String, dynamic> data = new Map<String, dynamic>();
data['DashBoard'] = this.dashBoard;
data['FuelCons'] = this.fuelCons;
data['Bunkering'] = this.bunkering;
data['AMS'] = this.aMS;
data['ShaftPower'] = this.shaftPower;
data['KpiPerformance'] = this.kpiPerformance;
data['EOM'] = this.eOM;
data['Route'] = this.route;
data['Report'] = this.report;
data['Management'] = this.management;
return data;
}
}
Main.Dart
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MultiProvider(
providers: [
ChangeNotifierProvider(
create: (context) => UserVM(),
),
],
child: MaterialApp(
initialRoute: LoginScreen.id,
routes: {
LoginScreen.id: (context) => LoginScreen(),
SelectCompany.id: (context) => SelectCompany(),
},
),
);
}
}
My API class
class LoginScreenApi {
var dio = Dio();
Future<UserProfile> authenticateUser(
String email, String password, String token) async {
try {
String queryURL =
'$domainURL/User/LoginMobile?Email=$email&UserPassword=$password&MobileDeviceTokenId=$token';
Response response = await dio.get(queryURL);
print('login status: ${response.statusCode}');
if (response.statusCode == 200) {
UserProfile user = UserProfile.fromJson(response.data);
return user;
}
return null;
} catch (e) {
print(e);
return null;
}
}
}
My VM class
class UserVM extends ChangeNotifier {
UserProfile user;
UserVM({this.user});
/// Call Login API
Future<void> authenticateUser(
String email, String password, String token) async {
final results =
await LoginScreenApi().authenticateUser(email, password, token);
/// if login successfully, save the USER result and route to select company page
if (results != null) {
this.user = results;
notifyListeners();
Navigator.pushNamed(navigatorKey.currentContext, SelectCompany.id);
} else {
showDialog(
context: navigatorKey.currentContext,
builder: (BuildContext context) {
return PopUpDialog(
text: 'Wrong User ID or Password!',
);
});
}
}
}
The screen that I display the data from my provider
class _SelectCompanyState extends State<SelectCompany> {
#override
#override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
child: Text(
'${Provider.of<UserVM>(context, listen: false).replyStatus}',
style: TextStyle(color: Colors.black),
),
),
);
}
}
The Widget that call the Authenticate method at my login screen
Widget _loginButton() {
// ignore: deprecated_member_use
return RaisedButton(
onPressed: () async {
await user.authenticateUser(email, password, deviceToken);
setState(() {
showSpinner = true;
});
},
color: Colors.black,
child: Text(
'${userLanguage == 'chinese' ? '登入' : 'Login'}',
style:
TextStyle(fontSize: 15, color: Colors.yellow, fontFamily: 'Roboto'),
),
shape: RoundedRectangleBorder(
side: BorderSide(color: Colors.lightBlueAccent)),
);
}

Answer 1

The following line loads an instance of your UserVM.
final userVM = Provider<UserVM>.of(context,listen:false);
Your UserVM class doesn't have a property called replyStatus, it's your UserProfile class that does. So call it like this:
final replyStatus = userVM.user.replyStatus;
Note: Your user can also be null since you're not passing it while creating the UserVM(). Neither are you calling the authenticate method for user to be updated with results. If you're handling that somewhere else in your code that's fine else you need to check user for null as well before calling:
final replyStatus;
If(userVM.user! = null) replyStatus = userVM.user.replyStatus;
else //<-- some alternative here