How to use Listview builder to display api response data

Question

I want to create a list of records which will be like this

It can be multiple, depends on the api response data lenght. so for this i am trying to use futurebuilder and in it using ListView.builder to create this output design, but it gives me this error.

Error:

═══════ Exception caught by widgets library ═══════════════════════════════════
The getter 'length' was called on null.
Receiver: null
Tried calling: length
The relevant error-causing widget was
FutureBuilder<List<leaveHistory>>

════════════════════════════════════════════════════════════════════════════════
I/flutter (18266): DioError [DioErrorType.response]: Http status error [300]

Code:


class leaveHistory{
  
  final String date;
  final String fromdate;
  final String todate;
  final String description;
  final String type;
  final String Status;
  leaveHistory(this.date, this.fromdate, this.todate,this.description,this.type,this.Status);

}
class _LeaveHistoryState extends State<LeaveHistory> {

List<leaveHistory> historyList=[];

 Future<List<leaveHistory>> _getRecord() async{
   Dio dio=new Dio();
   var data={
     'username':getname,
     'token':getaccesstoken,
   };
   return dio
    .post(localhostUrlLeaveHistoryON,data: json.encode(data))
      .then((onResponse) async {

        Map<String, dynamic> map=onResponse.data;
        List<dynamic> data = map["data"];
        for (var h in data) {
          leaveHistory history = leaveHistory(
            h["Date"], 
            h["description"], 
            h["type"],
            h['fromdate'],
            h["todate"],
            h["leave"]
          );
          historyList.add(history);
          print(historyList);   //its output is Instance of 'leaveHistory'

        }
        return historyList;
      })
      .catchError((onerror){
        print(onerror.toString());
       
    });
  }


 Widget build(BuildContext context) {
     body:Stack(children: <Widget>[
       

    Container(
    padding: EdgeInsets.fromLTRB(15, 150, 0, 0),
    child:SingleChildScrollView(
      scrollDirection: Axis.vertical,
    
    child: FutureBuilder(
      
    
    future: _getRecord(),  //error points here
    
    builder: (BuildContext context, AsyncSnapshot<List<leaveHistory>> snapshot) {
      if(snapshot.data.length==null){
      return Center(
        heightFactor: 10,
        child:Text("Data is not avaliable",style: TextStyle(color: Colors.blue[900],fontWeight: FontWeight.bold,fontSize: 20),));
      }
      else{
        return ListView.builder(
          scrollDirection: Axis.vertical,
          shrinkWrap: true,
          itemCount: snapshot.data.length,
          itemBuilder: (BuildContext context,int index){
        return ListTile(
            title: Text(snapshot.data[index].Status),
        );
      },);
      }
    }
  ),
),)

   

    ]));
  }
}

please help me to fix it.

Try to my answer [here](https://stackoverflow.com/a/68594656/13997210) hope it's helpful to you — Ravindra S. Patil, Aug 13 '21 at 14:28

score 0 · Answer 1 · answered Aug 13 '21 at 13:54

0

Wrap the Listview.builder in a Expanded Widget

Expanded(
   child: ListView.builder(itemCount: snapshot.data.length,
      shrinkWrap: true,
      itemBuilder: (BuildContext context,int index){
        return ListTile(
            title: Text(snapshot.data[index].Status),
        );
      },)
)

answered Aug 13 '21 at 13:54

Mr.Paul

142
1
8

yes, i used that it resolve my problem, but one problem i got is when i redirect to screen it display the this error ```The getter 'length' was called on null. Receiver: null Tried calling: length ``` which is dio 300 error and then after few seconds it display the records – TimeToCode Aug 13 '21 at 13:58
can u please help me to fix this – TimeToCode Aug 13 '21 at 13:58
You are checking `snapshot.data.length==null` but `snapshot.data` is null initially. Replace it with `if(!snapshot.hasData || snapshot.data.length==0)` – Kedar Karki Aug 13 '21 at 14:44

How to use Listview builder to display api response data

1 Answers1