title: Flutter :How to build a infinite list using future builder that display n-record at a time
body: <p>I am trying to build a list view in flutter that load data base on index and record per page</p>
  
  <p>I am able to display a fix number of record but need some help how get and display the next set of record and so on</p>
  
  <p>Here is my code snippet</p>
  
  <pre><code>Widget build(BuildContext context) {
      return SafeArea(
          child: Column(
        children: &lt;Widget&gt;[
          searchBoxWidget(),
          Expanded(
            child: FutureBuilder(
              future: getRecordToDisplay(),
              builder: (BuildContext context, AsyncSnapshot snapshot) {
                switch (snapshot.connectionState) {
                  case ConnectionState.none:
                  case ConnectionState.active:
                  case ConnectionState.waiting:
                    return Center(child: CircularProgressIndicator());
                  case ConnectionState.done:
                    if (snapshot.hasError) {
                      return Text('You have some error : ');
                    } else if (snapshot.data != null) {
                      return buildListView(snapshot);
                    } else {
                      return Text('You have some error : ');
                    }
                }
              },
            ),
          ),
        ],
      ));
    }
  
  
  void initState() {
      super.initState();
      _scrollController.addListener(() {
        if (_scrollController.position.pixels ==
            _scrollController.position.maxScrollExtent) {}
      });
    }
  
  
  
  
   Future&lt;Jobs&gt; getRecordToDisplay() async {
      return await getJobs(startPage, recordPerFetch);
    }
  
  
   ListView buildListView(AsyncSnapshot snapshot) {
      return ListView.builder(
          itemCount: snapshot.data.hits.length,
          controller: _scrollController,
          itemBuilder: (BuildContext context, int index) {
            return InkWell(
                onTap: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(
                      builder: (context) =&gt; DetailPage(
                          lobId: snapshot.data.hits[index].lobId,
                          atsReference: snapshot.data.hits[index].atsReference),
                    ),
                  );
                },
                child: Container(
                  // width: MediaQuery.of(context).size.width,
                  padding: const EdgeInsets.all(14.0),
  
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: &lt;Widget&gt;[
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: &lt;Widget&gt;[
                          Flexible(
                            child: Padding(
                              padding:
                                  const EdgeInsets.only(top: 8.0, bottom: 8.0),
                              child: Text(
                                snapshot.data.hits[index].title,
                                style: TextStyle(
                                  color: Color(0xff2175D9),
                                  fontSize: 18.0,
                                ),
                              ),
                            ),
                          ),
                          Icon(
                            Icons.arrow_forward,
                            color: Colors.blue,
                          )
                        ],
                      ),
                      Text(
                        snapshot.data.hits[index].jobLocation.city +
                            " , " +
                            snapshot
                                .data.hits[index].jobLocation.stateAbbreviation,
                        style: TextStyle(
                          color: Color(0xff0f1941),
                          fontSize: 16.0,
                        ),
                      ),
                      SizedBox(
                        height: 8.0,
                      ),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: &lt;Widget&gt;[
                          Text(
                            snapshot.data.hits[index].salary.salaryString,
                            style: TextStyle(
                              color: Color(0xff0f1941),
                              fontSize: 16.0,
                            ),
                          ),
                          Text(
                            snapshot.data.hits[index].createdDate,
                            style: TextStyle(
                              color: Color(0xff0f1941),
                              fontSize: 14.0,
                            ),
                          ),
                        ],
                      ),
                      SizedBox(
                        height: 8.0,
                      ),
                      Divider(color: Colors.brown),
                    ],
                  ),
                ));
          });
    }
  </code></pre>
  
  <p>So, it loads the first  with n record  but I don't know how to  load the next set of pages when you reach the bottom of the current record with a future builder.</p>
  
  <p>Thanks for your help</p>