Flutter使用POST顯示api資料-有解無憂

您好需要幫助將我的 API 資料顯示為文本。我已經收到回復，但我不知道如何將其轉換為將顯示在螢屏上的文本。現在資料顯示在終端上。

這是我的代碼：

    class carList extends StatefulWidget {
      const carList({Key? key}) : super(key: key);
    
      @override
      State<carList> createState() => _carListState();
    }
    
    class _carListState extends State<carList> {
    
      var userController = TextEditingController();
      var apiController = TextEditingController();
      final pref = Pref();
    
      @override
      void initState() {
        MySharedPreferences().getUserId().then((value) {
          setState(() {
            userController.text = value.toString();
          });
        });
        MySharedPreferences().getUserToken().then((value) {
          setState(() {
            apiController.text = value.toString();
          });
        });
        //TODO: IMPLEMENT INITSTATE
      }

這是我想顯示我的 API 資料的地方

      @override
      Widget build(BuildContext context) {
        return Scaffold(
            body: ListView(
                children: <Widget>[
                  Container(
                    padding: const EdgeInsets.all(10),
                    child: TextField(
                      controller: userController,
                      decoration: const InputDecoration(
                        border: OutlineInputBorder(),
                        suffixIcon: Icon(Icons.email),
                        labelText: 'User ID',
                      ),
                    ),
                  ),
                  Container(
                    padding: const EdgeInsets.all(10),
                    child: TextField(
                      controller: apiController,
                      decoration: const InputDecoration(
                        border: OutlineInputBorder(),
                        suffixIcon: Icon(Icons.email),
                        labelText: 'Token',
                      ),
                    ),
                  ),
                  Container(
                    margin: EdgeInsets.all(25),
                    child: TextButton(
                      child: Text('Show Car List',
                        style: TextStyle(fontSize: 20.0,
                            color: Colors.blueAccent,
                            backgroundColor: Colors.white),
                      ),
                      onPressed: () {
                        list();
                      },
                    ),
                  )
                ]
            )
        );
      }

這是我的 API 回應

void list() async {
        {
          var response = await http.post(
              Uri.parse("http://servisjer.me-tech.com.my/api/Car/GetUserCar"),
              body: ({
                'user_id': userController.text,
                'token': apiController.text,
                'device': "Android",
              }));
          if (response.statusCode == 200) {
            final body = jsonDecode(response.body);
            print(apiController.text);
            print(body.toString());
            ScaffoldMessenger.of(context)
                .showSnackBar(SnackBar(content: Text("Successfully Login")));
          }
        }
      }
    }

我想顯示我的資料的這個頁面。

這是我的日志回復

{
    "Status": "OK",
    "Message": "Senarai maklumat kereta.",
    "Details": [
      {
        "car_id": 184,
        "user_id": 141,
        "manufacturer_id": 21,
        "name": "Akma",
        "registration_no": "ws 3345",
        "model_name": "Bezza",
        "production_year": 2022,
        "notes": null,
        "date_purchased": "2022-08-10",
        "image":
            " http://servisjer.me-tech.com.my/admin/storage/app/media/userplugin/7PyVIp8iwb.png"
      }
    ]
  }

uj5u.com熱心網友回復：

使用 API 回應資料的最佳方法是從https://app.quicktype.io/創建模型（復制您的回應并粘貼到此鏈接并選擇語言 dart）并根據您的要求使用。

我從您的 API 回應中創建名稱為“GetUserCarModel”的模型并以這種方式使用。

Future<void> list() async {
  {
    var response = await http.post(
        Uri.parse("http://servisjer.me-tech.com.my/api/Car/GetUserCar"),
        body: ({
          'user_id': userController.text,
          'token': apiController.text,
          'device': "Android",
        })
    );

    if (response.statusCode == 200) {
      final body = jsonDecode(response.body);
      GetUserCarModel getUserCarModel = GetUserCarModel.fromJson(body);
      print("getUserCarModel ===> ${getUserCarModel.toString()}");
      ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text("Successfully Login")));
    }
  }
}

uj5u.com熱心網友回復：

首先，您必須為您的回應創建一個模型類。

    import 'dart:convert';

CarDetailResponse carDetailResponseFromJson(String str) => CarDetailResponse.fromJson(json.decode(str));

String carDetailResponseToJson(CarDetailResponse data) => json.encode(data.toJson());

class CarDetailResponse {
  CarDetailResponse({
    this.status,
    this.message,
    this.details,
  });

  String? status;
  String? message;
  List<Detail>? details;

  factory CarDetailResponse.fromJson(Map<String, dynamic> json) => CarDetailResponse(
    status: json["Status"],
    message: json["Message"],
    details: List<Detail>.from(json["Details"].map((x) => Detail.fromJson(x))),
  );

  Map<String, dynamic> toJson() => {
    "Status": status,
    "Message": message,
    "Details": List<dynamic>.from(details!.map((x) => x.toJson())),
  };
}

class Detail {
  Detail({
    this.carId,
    this.userId,
    this.manufacturerId,
    this.name,
    this.registrationNo,
    this.modelName,
    this.productionYear,
    this.notes,
    this.datePurchased,
    this.image,
  });

  int? carId;
  int? userId;
  int? manufacturerId;
  String? name;
  String? registrationNo;
  String? modelName;
  int? productionYear;
  dynamic notes;
  DateTime? datePurchased;
  String? image;

  factory Detail.fromJson(Map<String, dynamic> json) => Detail(
    carId: json["car_id"],
    userId: json["user_id"],
    manufacturerId: json["manufacturer_id"],
    name: json["name"],
    registrationNo: json["registration_no"],
    modelName: json["model_name"],
    productionYear: json["production_year"],
    notes: json["notes"],
    datePurchased: DateTime.parse(json["date_purchased"]),
    image: json["image"],
  );

  Map<String, dynamic> toJson() => {
    "car_id": carId,
    "user_id": userId,
    "manufacturer_id": manufacturerId,
    "name": name,
    "registration_no": registrationNo,
    "model_name": modelName,
    "production_year": productionYear,
    "notes": notes,
    "date_purchased": "${datePurchased!.year.toString().padLeft(4, '0')}-${datePurchased!.month.toString().padLeft(2, '0')}-${datePurchased!.day.toString().padLeft(2, '0')}",
    "image": image,
  };
}

你可以在 app.quicktype.io 的幫助下制作這個模型類

然后在得到回應后，將 response.body 分配給這個模型類物件

    void list() async {
        {
          var response = await http.post(
              Uri.parse("http://servisjer.me-tech.com.my/api/Car/GetUserCar"),
              body: ({
                'user_id': userController.text,
                'token': apiController.text,
                'device': "Android",
              }));
          if (response.statusCode == 200) {
            final body = jsonDecode(response.body);
setState(() {
            carDetailResponse = 
            carDetailResponseFromJson(body);
          });
            
            print(apiController.text);
            print(body.toString());
            ScaffoldMessenger.of(context)
                .showSnackBar(SnackBar(content: Text("Successfully Login")));
          }
        }
      }
    }

然后在 UI 使用這個模型類來顯示資料。喜歡 -

    class CarDetailScreen extends StatefulWidget {
  const CarDetailScreen({Key? key}) : super(key: key);

  @override
  State<CarDetailScreen> createState() => _CarDetailScreenState();
}

class _CarDetailScreenState extends State<CarDetailScreen> {
  CarDetailResponse? carDetailResponse;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: ListView(children: <Widget>[
      Container(
        padding: const EdgeInsets.all(10),
        child: TextField(
          controller: userController,
          decoration: const InputDecoration(
            border: OutlineInputBorder(),
            suffixIcon: Icon(Icons.email),
            labelText: 'User ID',
          ),
        ),
      ),
      Container(
        padding: const EdgeInsets.all(10),
        child: TextField(
          controller: apiController,
          decoration: const InputDecoration(
            border: OutlineInputBorder(),
            suffixIcon: Icon(Icons.email),
            labelText: 'Token',
          ),
        ),
      ),
      Container(
        margin: EdgeInsets.all(25),
        child: TextButton(
          child: Text(
            'Show Car List',
            style: TextStyle(fontSize: 20.0, color: Colors.blueAccent, backgroundColor: Colors.white),
          ),
          onPressed: () {
            list();
          },
        ),
      ),
      carDetailResponse != null
          ? Expanded(
              child: ListView.builder(
                shrinkWrap: true,
                physics: const ClampingScrollPhysics(),
                itemCount: carDetailResponse!.details!.length,
                itemBuilder: (context, index) {
                  var car = carDetailResponse!.details![index];
                  return Text(car.name ?? '');
                },
              ),
            )
          : const SizedBox()
    ]));
  }

}

uj5u.com熱心網友回復：

假設這是有效的回應：

{
       "Status":"OK",
       "Message":"Sena.",
       "Details":[
          {
             "car_id":184,
             "user_id":141,
             "manufacturer_id":21,
             "name":"Akma",
             "registration_no":"ws 3345",
             "model_name":"Bezza",
             "production_year":2022,
             "notes":null,
             "date_purchased":"2022-08-10",
             "image":"http://servisjer.me-tech.com.my/admin/storage/app/media/userplugin/7PyVIp8iwb.png"
          }
                 ]
}

然后要保存詳細資訊是一個串列，因此您必須遍歷該串列，即

if(body["Status"]=="OK")
{
      List<Detail> allRecord;
      final parsed = json.decode(body).cast<Map<String, dynamic>>();
      allRecord = parsed .map<Detail>((json) => Detail.fromJson(json)).toList();
}

這是你的模型：

// To parse this JSON data, do
//
//     final responseModel = responseModelFromJson(jsonString);

import 'dart:convert';

ResponseModel responseModelFromJson(String str) => ResponseModel.fromJson(json.decode(str));

String responseModelToJson(ResponseModel data) => json.encode(data.toJson());

class ResponseModel {
    ResponseModel({
        this.status,
        this.message,
        this.details,
    });

    String status;
    String message;
    List<Detail> details;

    factory ResponseModel.fromJson(Map<String, dynamic> json) => ResponseModel(
        status: json["Status"],
        message: json["Message"],
        details: List<Detail>.from(json["Details"].map((x) => Detail.fromJson(x))),
    );

    Map<String, dynamic> toJson() => {
        "Status": status,
        "Message": message,
        "Details": List<dynamic>.from(details.map((x) => x.toJson())),
    };
}

class Detail {
    Detail({
        this.carId,
        this.userId,
        this.manufacturerId,
        this.name,
        this.registrationNo,
        this.modelName,
        this.productionYear,
        this.notes,
        this.datePurchased,
        this.image,
    });

    int carId;
    int userId;
    int manufacturerId;
    String name;
    String registrationNo;
    String modelName;
    int productionYear;
    dynamic notes;
    DateTime datePurchased;
    String image;

    factory Detail.fromJson(Map<String, dynamic> json) => Detail(
        carId: json["car_id"],
        userId: json["user_id"],
        manufacturerId: json["manufacturer_id"],
        name: json["name"],
        registrationNo: json["registration_no"],
        modelName: json["model_name"],
        productionYear: json["production_year"],
        notes: json["notes"],
        datePurchased: DateTime.parse(json["date_purchased"]),
        image: json["image"],
    );

    Map<String, dynamic> toJson() => {
        "car_id": carId,
        "user_id": userId,
        "manufacturer_id": manufacturerId,
        "name": name,
        "registration_no": registrationNo,
        "model_name": modelName,
        "production_year": productionYear,
        "notes": notes,
        "date_purchased": "${datePurchased.year.toString().padLeft(4, '0')}-${datePurchased.month.toString().padLeft(2, '0')}-${datePurchased.day.toString().padLeft(2, '0')}",
        "image": image,
    };
}

最糟糕的方法：如果您確定 Details 陣列只有一個物件，請使用 for each 回圈，即

for (var data in details) 
{

  debugPrint(data.model_name);
  debugPrint(data.registration_no);
 //and many more

 }

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/511383.html

標籤：扑api邮政http-post

上一篇：使用curl(qBittorrentWebAPI)過濾陣列

下一篇：如何在改造后請求中傳遞請求引數