How to create a pageView with ListView

Question

I have a list Named Cart and it may consist of more than 12 items and if it is more than 13 I want to create pages from it. How can I do it? The below code generates one page. Can you point me to how to build more pages?

Expanded(
  child: PageView.builder(
      scrollDirection: Axis.horizontal,
      itemBuilder: (BuildContext context, int index) {
        return
          Expanded(
          child: ListView.builder(
              controller: scrollController,
              itemCount: CartServiceV2().getCartTotalItems() > 13
                  ? 13
                  : CartServiceV2().getCartTotalItems(),
              itemBuilder: (context, int index) {
                return Padding(
                  padding: EdgeInsets.symmetric(horizontal: 20.0),
                  child: InvoiceWidgetV4(
                    item: cart[index],
                    id: index + 1,
                  ),
                );
              }),
        );
      },
    ),
)

Giorgi · Answer 1 · 2021-06-07T19:34:23.517

0

void BuildRestItems(){
     var restItemList = []; 
     var yourList =["data1","data2","data3","data4","data5","data6","data7","data8","data9",
             "data10","data11","data12","data13","data14","data15","data16"];
     for (int i=13; i < yourList.length; i++) 
      { 
          restItemList.add(yourList[i]);
      }
}

Expanded(
              child: PageView.builder(
                  scrollDirection: Axis.horizontal,
                  itemBuilder: (BuildContext context, int index) {
                    return
                      Expanded(
                      child: ListView.builder(
                          controller: scrollController,
                          itemCount: restItemList.length
                             
                          itemBuilder: (context, int index) {
                            return Padding(
                              padding: EdgeInsets.symmetric(horizontal: 20.0),
                              child: InvoiceWidgetV4(
                                item: restItemList[index],
                                id: index + 1,
                              ),
                            );
                          }),
                    );
                  },
                ),
            )

edited Jun 07 '21 at 19:34

answered Jun 07 '21 at 12:33

Giorgi

141
1
4

if we chance CartServiceV2().getCartTotalItems() -13 to 13 it will be ok for the first page...but I want the next page to show only the remaining items for example if there are 18 items in second-page show 5 items ....now first page and second page are same – Ardeshir ojan Jun 07 '21 at 12:55
1

Create another list for the rest tems – Giorgi Jun 07 '21 at 13:06
For Example: var restItemList = []; var actualList = ["data1","data2","data3"]; for (int i=0; i <2; i++) { restItemList.add(actualList[i]); } and build restItemList – Giorgi Jun 07 '21 at 13:11
can you edit your code to tell me how to show the second list? – Ardeshir ojan Jun 07 '21 at 19:12
Edited. check it – Giorgi Jun 07 '21 at 19:36
thanks for your answer...my list has 18 items and now it only shows 5 last items – Ardeshir ojan Jun 08 '21 at 04:53

How to create a pageView with ListView

1 Answers1