how to make a grid view to be paged?-CodePudding

I want to make a view like image below that has a list of items to be shown as gridview.but I want it to have like 8 of them in each page and user can go next and previous page.could you help me how to do that?

CodePudding user response：

You can create a view with a list of items shown as a gridview using the GridView widget in Flutter. To allow the user to go to the next and previous pages, you can use the PageView widget.

Here's an example of how you can achieve this:

PageView(
  controller: _pageController,
  children: <Widget>[
    GridView.count(
      crossAxisCount: 4,
      children: List.generate(8, (index) {
        return MyGridItem(index: index);
      }),
    ),
    GridView.count(
      crossAxisCount: 4,
      children: List.generate(8, (index) {
        return MyGridItem(index: index 8);
      }),
    ),
  ],
);

In this example, the PageView widget has a controller property that is used to navigate between pages. Each child of the PageView is a GridView with a crossAxisCount of 4, which means it will have 4 items per row. The GridView has a children property that is a list of MyGridItem widgets, where each item is generated using the List.generate method.

You can use PageController to control the pages and navigate between them.

PageController _pageController = PageController();

You can use PageController.nextPage and PageController.previousPage to navigate between pages.

_pageController.nextPage(duration: Duration(milliseconds: 300), curve: Curves.ease);
_pageController.previousPage(duration: Duration(milliseconds: 300), curve: Curves.ease);

You can add buttons or any other widgets to navigate between pages You can use PageView.builder instead of PageView if you want to have more dynamic pages.

CodePudding user response：

My advice is to use Wrap instead of GridView and you can handle it and it can fill the pages according to the screen size. if you are fetching datas from api and it has pagination you can manage to show list of Wrap in every pages by clicking Next or Previous. if you had any question about my answer i'm here to make it clear. Happy coding... Moraghebe khodet bash ;)