Flutter GetX中如何使用observable方法处理复杂的API数据响应

如何解决Flutter GetX中如何使用observable方法处理复杂的API数据响应

我是 flutter 和 GetX 包世界的新手，我正在尝试使用 Laravel 作为我的 API 服务创建一个简单的应用程序，我正在以 JSON 格式发送来自 API 的响应，我正在使用 Laravel 资源 API，所以它在响应中发送了一些额外的元数据，我已经在我的 flutter 应用程序中创建了服务模型和控制器，但是当我在控制器中初始化一个可观察变量时，它抛出了很多错误，我尝试了所有方法，但它工作正常我只从 API 发送数据列表，因为我必须在控制器中定义 List<Model>.obs，但是当我根据需要从 API 发送正确的响应时出现问题。

这是我来自 API 的 JSON 响应数据

{
    "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",{
            "id": 3,{
            "id": 4,{
            "id": 5,{
            "id": 6,{
            "id": 7,{
            "id": 8,{
            "id": 9,{
            "id": 10,{
            "id": 11,{
            "id": 12,{
            "id": 13,{
            "id": 14,{
            "id": 15,"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": "&laquo; 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,"label": "Next &raquo;","active": false
            }
        ],"path": "http://localhost:8000/api/transactions","per_page": 15,"to": 15,"total": 16
    }
}

这是我的服务类

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;
    }
  }
}

这是我的控制器

主要问题是在声明可观察变量时检查 line no 6 in controller

这个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);
    }
  }
}

模型代码是这个

// 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"],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"],dynamic> toJson() => {
        "first": first,"last": last,"prev": prev,"next": next,};
}

class Meta {
  Meta({
    this.currentPage,this.from,this.lastPage,this.path,this.perPage,this.to,this.total,});

  int currentPage;
  int from;
  int lastPage;
  List<Link> links;
  String path;
  int perPage;
  int to;
  int total;

  factory Meta.fromJson(Map<String,dynamic> json) => Meta(
        currentPage: json["current_page"],from: json["from"],lastPage: json["last_page"],links: List<Link>.from(json["links"].map((x) => Link.fromJson(x))),path: json["path"],perPage: json["per_page"],to: json["to"],total: json["total"],dynamic> toJson() => {
        "current_page": currentPage,"from": from,"last_page": lastPage,"links": List<dynamic>.from(links.map((x) => x.toJson())),"path": path,"per_page": perPage,"to": to,"total": total,};
}

class Link {
  Link({
    this.url,this.label,this.active,});

  String url;
  dynamic label;
  bool active;

  factory Link.fromJson(Map<String,dynamic> json) => Link(
        url: json["url"] == null ? null : json["url"],label: json["label"],active: json["active"],dynamic> toJson() => {
        "url": url == null ? null : url,"label": label,"active": active,};
}

Please guys help me in this I am trying from last7 days but no success.

解决方法

item_model.dart

class ItemModel {
  int id;
  String description;
  String amount;
  String type;
  int userId;
  DateTime createdAt;
  DateTime updatedAt;

  ItemModel.fromJson(Map<String,dynamic> data) {
    id = data['id'];
    description = data['description'];
    amount = data['amount'];
    type = data['type'];
    userId = data['userId'];
    if (data['created_at'] != null) createdAt = DateTime.parse(data['created_at']);
    if (data['updated_at'] != null) updatedAt = DateTime.parse(data['updated_at']);
  }
}

page_links_model.dart

class PageLinksModel {
  String first,last,prev,next;

  PageLinksModel.fromJson(Map<String,dynamic> data) {
    first = data['first'];
    last = data['last'];
    prev = data['prev'];
    next = data['next'];
  }
}

pages_status_model.dart

class PagesStatusModel {
  int currentPage,from,lastPage;
  var links = List<PageInfoModel>();
  String path;
  int perPage,to,total;

  PagesStatusModel.fromJson(Map<String,dynamic> data) {
    currentPage = data['current_page'];
    from = data['from'];
    lastPage = data['last_page'];
    (data['links'] as List).forEach((e) => links.add(PageInfoModel.fromJson(e)));
    path = data['path'];
    perPage = data['per_page'];
    to = data['to'];
    total = data['total'];
  }
}

class PageInfoModel {
  String url; 
  dynamic label;
  bool active;

  PageInfoModel.fromJson(Map<String,dynamic> data) {
    url = data['url'];
    label = data['label'];
    active = data['active'];
  }
}

transaction_model.dart

import 'package:getx_api/models/pages_status_model.dart';

class TransactionModel {
  var data = List<ItemModel>();
  PageLinksModel links;
  PagesStatusModel meta;

  TransactionModel.fromJson(Map<String,dynamic> source) {
    (source['data'] as List).forEach((e) => data.add(ItemModel.fromJson(e)));
    links = PageLinksModel.fromJson(source['links']);
    meta = PagesStatusModel.fromJson(source['meta']);
  }
}

net_service.dart

import 'dart:convert';

import 'package:getx_api/src/shared/transactions_data.dart';
import 'package:http/http.dart' as http;

class NetService {
  static Future fetchJsonData(String url) {
    return
      http.get(url)
        .then((response) => response?.statusCode == 200 ? jsonDecode(response.body) : null)
        .catchError((err) => print(err));
  }

  static Future fetchLocalJsonData() async {
    await Future.delayed(Duration(seconds: 3));

    return jsonDecode(transactionData) as Map<String,dynamic>;
  }
}

transaction_controller.dart

import 'package:get/get.dart';
import 'package:getx_api/models/transaction_model.dart';
import 'package:getx_api/services/net_service.dart';


const _serverUrl = 'http://10.0.2.2:8000/api/transactions';

class TransactionController extends GetxController {
  var _trx;
  var _dataAvailable = false.obs;

  @override
  void onInit() {
    super.onInit();
    fetchTransactions();
  }

  bool get dataAvailable => _dataAvailable.value;
  TransactionModel get trx => _trx;

  Future<void> fetchTransactions() {
    // return NetService.fetchJsonData(_serverUrl)
    return NetService.fetchLocalJsonData()
      .then((response) {
        if (response != null) _trx = TransactionModel.fromJson(response);
      })
      .catchError((err) => print('Error!!!!! : $err'))
      .whenComplete(() => _dataAvailable.value = _trx != null);
  }
}

home_page.dart

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:getx_api/src/controllers/transaction_controller.dart';


class HomePage extends StatelessWidget {
  /* ---------------------------------------------------------------------------- */
  const HomePage({Key key}) : super(key: key);
  /* ---------------------------------------------------------------------------- */
  @override
  Widget build(BuildContext context) {
    final obj = Get.put(TransactionController());

    return Scaffold(
      appBar: buildAppBar(),body: Obx(() => obj.dataAvailable
        ? Text(obj.trx.toString())
        : Text('... waiting ...')),);
  }
  /* ---------------------------------------------------------------------------- */
  AppBar buildAppBar() {
    return AppBar(
      title: Text('Hi!'),centerTitle: true,);
  }
}

transactions_data.dart

const transactionData = '''
{
    "data": [
    ....
    }
}
''';

Flutter GetX中如何使用observable方法处理复杂的API数据响应

如何解决Flutter GetX中如何使用observable方法处理复杂的API数据响应

解决方法

相关推荐