如何修复它数据未显示在颤振列表中

Question

我想显示一个数据列表来解析 JSON，我已经编写了所有代码，但列表视图中没有显示数据我不明白我的代码中的错误是什么。我正在分享我的代码。请向我建议

这是我解析的 JSON

[ { "customer_name": "ridge_valley, Ridge Valley School", “手机”：“9796005602”， "product_id": "47265", "imei": "868004027863425", "serial_no": "2016172679", “名称”：“L-100 [2G]”， “id”：“36”， "complain_no": "11212", "complain_id": "CMP/160720/11211", "fault": "设备不显示\n", "mobile_no": "5756200501797", "customer_product_id": "10514", “kyc_id”：空， “vehicle_no”：“HR55R0561” } ]

这是我的代码。

import 'package:deviceinstallation/complaint.dart';
import 'package:deviceinstallation/ordercountdetail.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';
import 'package:http/http.dart' as http;
import 'dashboard_screen.dart';
import 'model/complaint_count_model.dart';

//void main()=> runApp(ComplaintCountDetails());

class ComplaintCountDetails  extends StatelessWidget{
  String cID;
  ComplaintCountDetails(this.cID);

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    print("id"+cID);
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: "FLutter Demo",
      theme: ThemeData(
          primarySwatch: Colors.blue
      ),
      home: ComplaintCountDetailsScreen(cID: cID,),
    );

  }
}

class ComplaintCountDetailsScreen extends StatefulWidget {
  //final String title;
  String cID;
  //ComplaintCountDetailsScreen({this.cID});
  ComplaintCountDetailsScreen({Key key, this.cID}): super(key: key);

  @override
  ComplaintCountStates createState() => ComplaintCountStates(cID);
}

class ComplaintCountStates extends State<ComplaintCountDetailsScreen> {
  Icon cusIcon =Icon(Icons.search);
  Widget cusSearchBar= Text("Complaint List");
  String cID;
  ComplaintCountStates(this.cID);
  String sUrl= "https://fasttracksoft.us/api_v2/device_installation/";
  bool isLoading= false;
  List<ComplaintCountDetailModel> complaintCountList;
  Future<List<ComplaintCountDetails>> getComplaintCountList()async{
    setState(() {
      isLoading=true;
    });
     final prefs= await SharedPreferences.getInstance();
      var params= "complaindetail.php?id="+prefs.getString('id')+"&cid="+cID;
     // print("param:"+params);
     try{
       var response= await http.get(sUrl+params);
       print("sURL:"+sUrl);
       print("param:"+params);
      // print("response+url_param:$response");
       print("customerID:"+prefs.getString('id'));
       print("url+params:"+sUrl+params);

       if(response.statusCode==200){
         complaintCountList=complaintCountDetailModelFromJson(response.body);
         print("listJSON:"+complaintCountList.toString());
         print(complaintCountList[0].toString());
         if(complaintCountList!=null){
           setState(() {
             isLoading=false;
           });
         }
       }
     }catch(e){
       //return complaintCountList;
     }
  }

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    setState(() {
      isLoading=true;
      getComplaintCountList();
    });
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        leading: IconButton(
          icon: Icon(Icons.arrow_back, color: Colors.white),
          onPressed: (){
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => ComplaintScreen()),
            );
          },
        ),
        title: cusSearchBar,
        actions: <Widget>[
          IconButton(
            //tooltip: 'Search',
            //icon: const Icon(Icons.search),
            //Don't block the main thread
            onPressed: () {
              setState(() {
                if(this.cusIcon.icon==Icons.search){
                  this.cusIcon=Icon(Icons.cancel);
                  this.cusSearchBar=TextField(
                    textInputAction: TextInputAction.go,
                    decoration: InputDecoration(
                      border: InputBorder.none,
                      hintText: "Search here",
                    ),
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 16.0,
                    ),
                  );
                }else{
                  this.cusIcon =Icon(Icons.search);
                  this.cusSearchBar= Text("AppBar");
                }
              });
            },
            icon: cusIcon,
          ),
        ],
      ),
      body:SafeArea(
          child: Column(
              children: <Widget>[
                Container(
                  padding: const EdgeInsets.fromLTRB(0.0, 5.0, 5.0, 0.0),
                  height: MediaQuery.of(context).size.height / 15.2,
                  width: MediaQuery.of(context).size.width * 15.5,
                 // color: Colors.teal,
                  child: Text("Customer Name :",
                  style: TextStyle(
                    fontSize: 25.0,
                    fontWeight: FontWeight.bold,
                    color: Colors.teal

                  ),),
                ),
                Container(
                  padding: const EdgeInsets.fromLTRB(0.0, 5.0, 5.0, 0.0),
                  height: MediaQuery.of(context).size.height / 15.2,
                  width: MediaQuery.of(context).size.width * 15.5,
                //  color: Colors.teal,
                  child:  Text("Complaint List for Engineer",
                    style: TextStyle(
                      fontStyle: FontStyle.italic,
                      fontSize: 20.0,
                      color: Colors.teal,
                      fontWeight: FontWeight.bold
                    ),),
                ),
                Visibility(
                    maintainSize: true,
                    maintainAnimation: true,
                    maintainState: true,
                    visible: isLoading,
                    child: Container(
                      child: CircularProgressIndicator(),
                    )),
                Expanded(
                    child: ListView.builder(
                        itemCount: null==complaintCountList ? 0:complaintCountList.length,
                        itemBuilder: (BuildContext context, index){
                          ComplaintCountDetailModel countModel= complaintCountList[index];
                          return Container(
                            child: Padding(
                              padding: const EdgeInsets.only(top: 0.0, bottom: 0.0, left: 5.0, right: 5.0),
                              child: Card(
                                child: Container(
                                  padding: const EdgeInsets.only(top: 10.0, bottom: 10.0, left: 15.0, right: 15.0),
                                  child: Column(
                                    crossAxisAlignment: CrossAxisAlignment.stretch,
                                    mainAxisSize: MainAxisSize.max,
                                    //crossAxisAlignment: CrossAxisAlignment.start,
                                    children: <Widget>[
                                      Text('IMEI :'+countModel.imei,
                                        style: TextStyle(
                                          //fontSize: 20.0,
                                          color: Colors.green,
                                          fontWeight: FontWeight.bold,
                                          // backgroundColor: Colors.green
                                        ),
                                      ),
                                      Text('Complaint ID :'+countModel.id,
                                        style: TextStyle(
                                          // fontSize: 20.0,
                                          color: Colors.black,
                                          // backgroundColor: Colors.green
                                        ),
                                      ),
                                      Text('Serial No :'+countModel.serialNo,
                                        style: TextStyle(
                                          //fontSize: 20.0,
                                          color: Colors.black,
                                          // backgroundColor: Colors.green
                                        ),
                                      ),
                                      Text('Customer Name :'+countModel.customerName,
                                        style: TextStyle(
                                          //fontSize: 20.0,
                                          color: Colors.black,
                                          // backgroundColor: Colors.green
                                        ),
                                      ),
                                      Text('Mobile :'+countModel.mobile,
                                        style: TextStyle(
                                          //fontSize: 20.0,
                                          color: Colors.black,
                                          // backgroundColor: Colors.green
                                        ),
                                      ),
                                      Text('Device Model :'+countModel.productId,
                                        style: TextStyle(
                                          // fontSize: 20.0,
                                          color: Colors.black,
                                          // backgroundColor: Colors.green
                                        ),
                                      ),

                                      Text('Vehicle No :'+countModel.vehicleNo,
                                        style: TextStyle(
                                          //fontSize: 20.0,
                                          color: Colors.black,
                                          // backgroundColor: Colors.green
                                        ),
                                      ),
                                      Text('Complaint issue :'+countModel.fault,
                                        style: TextStyle(
                                          //fontSize: 20.0,
                                          color: Colors.black,
                                          // backgroundColor: Colors.green
                                        ),
                                      ),
                                    ],
                                  ),
                                ),
                              ),
                            ),
                          );
                        }
                    ))
              ],
          ))
    );
  }
}

Answer 1

创建一个类来解码 json 对象。为此，请在此处轻松粘贴您的 json [https://app.quicktype.io/]

    List<DecoderClass> decoderClassFromJson(String str) => 

    List<DecoderClass>.from(json.decode(str).map((x) => DecoderClass.fromJson(x)));
    
    String decoderClassToJson(List<DecoderClass> data) => json.encode(List<dynamic>.from(data.map((x) => x.toJson())));
    
    class DecoderClass {
        DecoderClass({
            this.customerName,
            this.mobile,
            this.productId,
            this.imei,
            this.serialNo,
            this.name,
            this.id,
            this.complainNo,
            this.complainId,
            this.fault,
            this.mobileNo,
            this.customerProductId,
            this.kycId,
            this.vehicleNo,
        });
    
        final String customerName;
        fina

l String mobile;
    final String productId;
    final String imei;
    final String serialNo;
    final String name;
    final String id;
    final String complainNo;
    final String complainId;
    final String fault;
    final String mobileNo;
    final String customerProductId;
    final dynamic kycId;
    final String vehicleNo;

    factory DecoderClass.fromJson(Map<String, dynamic> json) => DecoderClass(
        customerName: json["customer_name"],
        mobile: json["mobile"],
        productId: json["product_id"],
        imei: json["imei"],
        serialNo: json["serial_no"],
        name: json["name"],
        id: json["id"],
        complainNo: json["complain_no"],
        complainId: json["complain_id"],
        fault: json["fault"],
        mobileNo: json["mobile_no"],
        customerProductId: json["customer_product_id"],
        kycId: json["kyc_id"],
        vehicleNo: json["vehicle_no"],
    );

    Map<String, dynamic> toJson() => {
        "customer_name": customerName,
        "mobile": mobile,
        "product_id": productId,
        "imei": imei,
        "serial_no": serialNo,
        "name": name,
        "id": id,
        "complain_no": complainNo,
        "complain_id": complainId,
        "fault": fault,
        "mobile_no": mobileNo,
        "customer_product_id": customerProductId,
        "kyc_id": kycId,
        "vehicle_no": vehicleNo,
    };
}

然后将其传递给未来的函数

  Future<DecoderClass> _future;
  Future<DecoderClass> getData() async {
    final http.Response response = await http.get(
        'https://fasttracksoft.us/api_v2/device_installation/',
        );

    if (response.statusCode < 200 ||
        response.statusCode > 400 ||
        json == null) {
      throw new Exception("Error while fetching data");
    } else {
      return DecodeClass.fromJson(json.decode(response.body));
    }
  }
  @override
void initState() {
super.initState();
_future = getData();
}

使用未来的构建者来接收此类

FutureBuilder<DecodeClass>(
    future: _future,
    builder: (context, snapshot) {
   return ListView.builder(
                  shrinkWrap: true,
                  itemBuilder: (context, i) {})})