如何使用可观察方法在 Flutter GetX 中处理复杂的 API 数据响应

Question

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

这是我的 JSON 来自 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": "&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,
                "active": false
            },
            {
                "url": "http://localhost:8000/api/transactions?page=2",
                "label": "Next &raquo;",
                "active": false
            }
        ],
        "path": "http://localhost:8000/api/transactions",
        "per_page": 15,
        "to": 15,
        "total": 16
    }
}

这是我的服务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;
    }
  }
}

这是我的控制器

主要问题是在声明可观察变量检查时 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"],
      );

  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.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"],
      );

  Map<String, 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"],
      );

  Map<String, 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.

Answer 1

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 中处理复杂的 API 数据响应

How to handle complex API data response in Flutter GetX using observable method

json

flutter

dart

flutter-getx