Stop Listview.builder in Flutter

Question

I'm loading articles from a WordPress instance that I want to display in a ListView, however I don't want to just load a list of all articles at the beginning as that could eventually be a lot. So I thought I could just make a Listview.builder with FutureBuilders that then each load a few articles at a time, however I have the problem that at some point the user gets to the end of the articles where I would like the ListView.builder to stop loading as there are no more articles for it to load. Is there a function for this, or how would one do this with Flutter? Also, it would be good if the Listview.Builder only builds one Future Builder at a time, so that there are not 10 loading icons on the screen.

Heres my Code:

ListView.builder(
                    //controller: _scrollController,
                    physics: BouncingScrollPhysics(),
                    padding: EdgeInsets.symmetric(
                      horizontal: 15,
                      vertical: 15,
                    ),
                    scrollDirection: Axis.vertical,
                    // separatorBuilder: (context, index) {
                    //   return SizedBox(
                    //     height: 15,
                    //   );
                    // },
                    // itemCount: this.articleList.length,
                    itemBuilder: (context, index) {
                      return FutureBuilder(
                        future: Article().getArticleList(index+1),
                        // ignore: missing_return
                        builder: (context, snapshot){
                          // ignore: missing_enum_constant_in_switch
                          switch (snapshot.connectionState){
                            case ConnectionState.none:
                            case ConnectionState.waiting:
                              return SpinKitWave(
                                color: Colors.red,
                              );
                            case ConnectionState.done:
                            case ConnectionState.active:
                              if (snapshot.hasData)
                                return ListView.builder(
                                  shrinkWrap: true,
                                  primary: false,
                                  itemCount: snapshot.data.length,
                                  itemBuilder: (context, index){
                                    return SomeWidgetThatDisplaysTheArticle;
                                  },
                                );
                              return Text("Ende");
                          }
                        },
                      );
                    },
                  ),

Thanks in advance

Answer 1

specify an integer.

int itemcount = 25; //specify the amount of listview item you want to show initially.

ListView.builder(
                        //controller: _scrollController,
                        physics: BouncingScrollPhysics(),
                        padding: EdgeInsets.symmetric(
                          horizontal: 15,
                          vertical: 15,
                        ),
                        scrollDirection: Axis.vertical,
                        // separatorBuilder: (context, index) {
                        //   return SizedBox(
                        //     height: 15,
                        //   );
                        // },
                        // itemCount: this.articleList.length,
                        itemBuilder: (context, index) {
                          return FutureBuilder(
                            future: Article().getArticleList(index+1),
                            // ignore: missing_return
                            builder: (context, snapshot){
                              // ignore: missing_enum_constant_in_switch
                              switch (snapshot.connectionState){
                                case ConnectionState.none:
                                case ConnectionState.waiting:
                                  return SpinKitWave(
                                    color: Colors.red,
                                  );
                                case ConnectionState.done:
                                case ConnectionState.active:
                                  if (snapshot.hasData)
                                    return ListView.builder(
                                      shrinkWrap: true,
                                      primary: false,
                                      itemCount:itemcount,
                                      itemBuilder: (context, index){
                                        return SomeWidgetThatDisplaysTheArticle;
                                      },
                                    );
                                  return Text("Ende");
                              }
                            },
                          );
                        },
                      ),

Then add a raised a button at the end and specify the on pressed to increse the itemcount :

    onPressed(){
    setState((){
    itemCount = Fieldvalue.increment(10); //This will increase the itemCount by 10 so itemcount will become 35 .
    });

}