I am a newbie in the world of flutter and GetX package and I am trying to create a simple app using Laravel as my API service and I am sending the response from the API in JSON format and I am using Laravel resource API so it is sending some extra meta data inside the response and I have already created service model and controller in my flutter app but when I am initializing an observable variable in controller it is throwing a lot error i tried all the methods but it is working fine when i am sending only data list from the API as I have to define List<Model>.obs
in controller but the problem is happening when i am sending the proper response from API as required.
Here is my JSON response data from the API
{
"data": [
{
"id": 1,
"description": "Purchased mouse",
"amount": "1200",
"type": "expense",
"user_id": 1,
"created_at": null,
"updated_at": null
},
{
"id": 2,
"description": "Purchased mouse sa",
"amount": "1200",
"type": "expense",
"user_id": 1,
"created_at": null,
"updated_at": null
},
{
"id": 3,
"description": "Purchased mouse",
"amount": "1200",
"type": "expense",
"user_id": 1,
"created_at": null,
"updated_at": null
},
{
"id": 4,
"description": "Purchased mouse sa",
"amount": "1200",
"type": "expense",
"user_id": 1,
"created_at": null,
"updated_at": null
},
{
"id": 5,
"description": "Purchased mouse",
"amount": "1200",
"type": "expense",
"user_id": 1,
"created_at": null,
"updated_at": null
},
{
"id": 6,
"description": "Purchased mouse sa",
"amount": "1200",
"type": "expense",
"user_id": 1,
"created_at": null,
"updated_at": null
},
{
"id": 7,
"description": "Purchased mouse",
"amount": "1200",
"type": "expense",
"user_id": 1,
"created_at": null,
"updated_at": null
},
{
"id": 8,
"description": "Purchased mouse sa",
"amount": "1200",
"type": "expense",
"user_id": 1,
"created_at": null,
"updated_at": null
},
{
"id": 9,
"description": "Purchased mouse",
"amount": "1200",
"type": "expense",
"user_id": 1,
"created_at": null,
"updated_at": null
},
{
"id": 10,
"description": "Purchased mouse sa",
"amount": "1200",
"type": "expense",
"user_id": 1,
"created_at": null,
"updated_at": null
},
{
"id": 11,
"description": "Purchased mouse",
"amount": "1200",
"type": "expense",
"user_id": 1,
"created_at": null,
"updated_at": null
},
{
"id": 12,
"description": "Purchased mouse sa",
"amount": "1200",
"type": "expense",
"user_id": 1,
"created_at": null,
"updated_at": null
},
{
"id": 13,
"description": "Purchased mouse",
"amount": "1200",
"type": "expense",
"user_id": 1,
"created_at": null,
"updated_at": null
},
{
"id": 14,
"description": "Purchased mouse sa",
"amount": "1200",
"type": "expense",
"user_id": 1,
"created_at": null,
"updated_at": null
},
{
"id": 15,
"description": "Purchased mouse",
"amount": "1200",
"type": "expense",
"user_id": 1,
"created_at": null,
"updated_at": null
}
],
"links": {
"first": "http://localhost:8000/api/transactions?page=1",
"last": "http://localhost:8000/api/transactions?page=2",
"prev": null,
"next": "http://localhost:8000/api/transactions?page=2"
},
"meta": {
"current_page": 1,
"from": 1,
"last_page": 2,
"links": [
{
"url": null,
"label": "« Previous",
"active": false
},
{
"url": "http://localhost:8000/api/transactions?page=1",
"label": 1,
"active": true
},
{
"url": "http://localhost:8000/api/transactions?page=2",
"label": 2,
"active": false
},
{
"url": "http://localhost:8000/api/transactions?page=2",
"label": "Next »",
"active": false
}
],
"path": "http://localhost:8000/api/transactions",
"per_page": 15,
"to": 15,
"total": 16
}
}
And here is my service class
import 'dart:convert';
import 'package:http/http.dart' as http;
import 'package:m_budget/models/transaction.dart';
class TransactionService {
static var client = http.Client();
static Future<Transaction> fetchTransactions() async {
var res = await client.get("http://10.0.2.2:8000/api/transactions");
if (res.statusCode == 200) {
return transactionFromJson(res.body);
} else {
return null;
}
}
}
And this is my controller
The main problem is while declaring the observable variable check line no 6 in controller
This one var transactions = Transaction().obs;
import 'package:get/get.dart';
import 'package:m_budget/models/transaction.dart';
import 'package:m_budget/services/transaction_service.dart';
class TransactionController extends GetxController {
var isLoading = true.obs;
var transactions = Transaction().obs;
@override
void onInit() {
fetchTransactions();
super.onInit();
}
void fetchTransactions() async {
isLoading(true);
try {
var txns = await TransactionService.fetchTransactions();
if (txns != null) {
isLoading(false);
transactions(txns);
}
} catch (e) {} finally {
isLoading(false);
}
}
}
And model code is this
// To parse this JSON data, do
//
// final transaction = transactionFromJson(jsonString);
import 'dart:convert';
Transaction transactionFromJson(String str) =>
Transaction.fromJson(json.decode(str));
String transactionToJson(Transaction data) => json.encode(data.toJson());
class Transaction {
Transaction({
this.data,
this.links,
this.meta,
});
List<Datum> data;
Links links;
Meta meta;
factory Transaction.fromJson(Map<String, dynamic> json) => Transaction(
data: List<Datum>.from(json["data"].map((x) => Datum.fromJson(x))),
links: Links.fromJson(json["links"]),
meta: Meta.fromJson(json["meta"]),
);
Map<String, dynamic> toJson() => {
"data": List<dynamic>.from(data.map((x) => x.toJson())),
"links": links.toJson(),
"meta": meta.toJson(),
};
}
class Datum {
Datum({
this.id,
this.description,
this.amount,
this.type,
this.userId,
this.createdAt,
this.updatedAt,
});
int id;
String description;
String amount;
String type;
int userId;
dynamic createdAt;
dynamic updatedAt;
factory Datum.fromJson(Map<String, dynamic> json) => Datum(
id: json["id"],
description: json["description"],
amount: json["amount"],
type: json["type"],
userId: json["user_id"],
createdAt: json["created_at"],
updatedAt: json["updated_at"],
);
Map<String, dynamic> toJson() => {
"id": id,
"description": description,
"amount": amount,
"type": type,
"user_id": userId,
"created_at": createdAt,
"updated_at": updatedAt,
};
}
class Links {
Links({
this.first,
this.last,
this.prev,
this.next,
});
String first;
String last;
dynamic prev;
String next;
factory Links.fromJson(Map<String, dynamic> json) => Links(
first: json["first"],
last: json["last"],
prev: json["prev"],
next: json["next"],
);
Map<String, dynamic> toJson() => {
"first": first,
"last": last,
"prev": prev,
"next": next,
};
}
class Meta {
Meta({
this.currentPage,
this.from,
this.lastPage,
this.links,
this.p