Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Load more option in flutter ListView

I want to fetch all the infinite list view data in parts, means Initially it load 10 data item and on scroll more it should fetch next 10 items. I am fetching data from my Laravel api and in my Laravel api endpoint there is not option for per_page, so Please help me to integrate load more option of list view data. Here is my List data.

List<Category> _categoryList = List<Category>();
  CategoryService _categoryService = CategoryService();

  bool isLoading = true;

  @override
  void initState() {
    super.initState();
    _getAllCategories();
  }
  _getAllCategories() async {
    var categories = await _categoryService.getCategories();
    var result = json.decode(categories.body);
    result['data'].forEach((data) {
      var model = Category();
      model.id = data["id"];
      model.name = data["categoryName"];
      model.icon = data["categoryIcon"];
      setState(() {
        _categoryList.add(model);
        isLoading = false;
      });
    });
  }

And I am fetching all data in simple ListTile.

child: ListView.builder(
        itemCount: //_categoryList.length,
        itemBuilder: (context, index) {
          return ListTile(
            title: _categoryList.name
          );
        },
      ),
like image 567
Pramod Yadav Avatar asked Oct 27 '22 15:10

Pramod Yadav


1 Answers

So I have a trick and I am using it in my project. What we need here is to load more data when we are at the end of the list. So to do that we can use the ListView.builder() only:


child: ListView.builder(
       itemCount: _categoryList.length + 1,
       itemBuilder: (context, index) {
         if(index == _categoryList.length){
          // loadMore();
          // return Loading();         
          }
         return ListTile(
            title: _categoryList.name
          );
       }),

So what we are doing is that we have set _categoryList.length + 1 to the itemCount. If _categoryList.length was 10 then we will have 11 items in the ListView and the index range will be 0 - 10. So inside the builder, we are checking that the index is equals to _categoryList.length which is 10. If the index is equals to the length of _categoryList.length, then we are at the end of the List and we can simply call some functions to load more data from Api or to show a loading widget.

I guess I got your question right, in this way you can simply lazy load data when user gets to the end of the List without using any third party libraries.

like image 145
Kalsang Dorjee Avatar answered Oct 30 '22 00:10

Kalsang Dorjee