Add item to provider in flutter - flutter

Question

What's the correct way to use provider with an api call?
My current setup, although I don't know if it's correct, is I have a response model and a Response class and the response model gets passed to the response class. the ui is using a provider. Heres's the code:
class InfoProvider extends ChangeNotifier {
Future<Response> getSomeInfo(SomeInfo someInfo) async {
try {
final responseJson = await _provider.post('/info', someInfo.toJson());
ResponseModel someResponse = ResponseModel.fromJson(responseJson['payload']);
return Response.success(someResponse);
} catch (e) {
if (e.toString() == 'refresh_token_not_found') return Response.unauthenticated();
return Response.error(e.getError());
}
}
Future<Response> fetchInfo() async {
try {
final responseJson = await _provider.get('info');
if (responseJson['payload'].isEmpty) return Response.success([]);
AllInfoResponse alLInfoResponse = AllInfoResponse.fromJson(responseJson['payload']);
_allInfo = alLInfoResponse.AllInfoResponse;
return Response.success(alLInfoResponse);
} catch (e) {
if (e.toString() == 'refresh_token_not_found') return Response.unauthenticated();
return Response.error(e.toString());
}
}
}
The ui has a future builder like this: future: Provider.of<InfoProvider>(context).getSomeInfo(),
So that all works, but how can I add some more items to the ui?
Here's my model:
class ResponseModel {
final List<SingleResponseModel> ResponseModel;
ResponseModel({this.ResponseModel});
factory ResponseModel.fromJson(List<dynamic> json) => ResponseModel(
ResponseModel: List<SingleResponseModel>.from(json.map((x) => SingleResponseModel.fromJson(x))),
);
}
class SingleResponseModel {
final String id;
final String title;
SingleResponseModel({
this.id,
this.title,
});
factory SingleResponseModel.fromJson(Map<String, dynamic> json) {
return SingleResponseModel(
id: json['_id'],
title: json['title'],
);
}
Map<String, dynamic> toJson() {
final Map<String, dynamic> data = new Map<String, dynamic>();
data['id'] = this.id;
data['title'] = this.title;
return data;
}
}

Answer 1

The best way to do this in your scenario is to wrap MaterialApp inside MyApp() in your main.dart file with MultiProvider. Try something like this: https://pub.dev/packages/provider#multiprovider You can place a ChangeNotifierProvider inside it.
Here is how you can access the values of ResponseModel in your UI:
final model=Provider.of<ResponseModel>(context,listen:false);
Don't forget to add getters and setters so that you can use notifyListeners() if you have any ui that depends on it.
This is how your model should look like:
class ResponseModel extends ChangeNotifier {
List<SingleResponseModel> _myModel;
get myModel => _myModel;
set myModel(List<SingleResponseModel> myModel) {
_myModel = myModel;
notifyListeners();
}
}
Here is how you can display your data in a Text Widget (Ideally, you should use Selector instead of Consumer so that the widget only rebuilds if the value its listening to changes):
#override
Widget build(BuildContext context) {
//other widgets
Selector<ResponseModel, int>(
selector: (_, model) => model.myModel,
builder: (_, model, __) {
return ListView.builder(
itemCount: model.length,
itemBuilder: (context, index) {
return ListTile(
title: Text(model[index].title),
subtitle:Text(model[index].id),
);
},
);
}
)
}
Hope this helps! Good Luck!