How to implement pagination in flutter?

Question

I have data in column using List.generate which I want to paginate as in image attached. Could anyone guide me with this? Any help is appreciated. Thank You.

Column(
  children: List.generate(
     pList.newsList.length,
     (index) => pList.newsList[index],
 ),
)

user_6270897 · Answer

Also, Here I'm attaching a reference link for your better understanding

https://mobikul.com/pagination-in-flutter-listview/#:~:text=Pagination%20in%20flutter%20listview%20is,like%20page%201%20and%20page%20.

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Pagination View"),
      ),
      body: Column(
        children: [
          Container(
            height: 50.0,
            color: Colors.green,
            child: Center(
              child: Text(message),
            ),
          ),
          Expanded(
            child: ListView.builder(
              itemCount: 30,
              itemBuilder: (context, index) {
                return ListTile(title: Text("Segment : $index"));
              },
            ),
          ),
        ],
      ),
    );
  }
 
@override
  void initState() {
   //added the pagination function with listener
    scrollcontroller.addListener(pagination);
    super.initState();
  }
 
 
//_subCategoryModel only use for check the length of product 
 
 
void pagination() {
      if ((scrollController.position.pixels ==
          scrollController.position.maxScrollExtent) && (_subCategoryModel.products.length < total)) {
        setState(() {
          isLoading = true;
          page += 1;
          //add api for load the more data according to new page
        });
      }
  }

How to implement pagination in flutter?

1 Answers