PageView is a widget in Flutter that provides a scrollable list of pages. It allows you to display content in a horizontal or vertical sequence and enables the user to swipe or scroll through the pages.
Here are some key points about PageView:
- Pages:
PageViewdisplays a list of pages, where each page is typically a widget or a screen. You can provide the pages as a list of widgets using thechildrenproperty or generate them dynamically using thePageView.builder. - Scrolling: Users can scroll horizontally or vertically through the pages by swiping left, right, up, or down. The scrolling behavior can be customized using properties like
scrollDirection,physics, andpageSnapping. - Infinite scrolling: By default,
PageViewsupports infinite scrolling, which means it wraps around to the beginning when reaching the end or vice versa. This behavior can be controlled using theallowImplicitScrollingproperty. - Page indicator:
PageViewdoes not provide a built-in page indicator. You can add a page indicator manually or use third-party packages likedots_indicatororsmooth_page_indicatorfor a pre-styled indicator. - Customization: You can customize the appearance and behavior of
PageViewusing various properties such ascontrollerfor programmatic page manipulation,onPageChangedto listen for page changes, andpageBuilderto define custom page transitions. - Nesting:
PageViewcan be nested inside other scrollable widgets likeListVieworScrollViewto create complex scrolling layouts.
PageView is a powerful widget for building features like onboarding screens, image galleries, carousels, and more. It provides a smooth and interactive way to navigate through a collection of content.
What is the difference between PageView and PageView.builder in use?
PageView is used when you have a fixed number of pages that you want to display in a PageView. You provide the children of the PageView as a list of widgets using the children property. For example:
PageView(
children: [
// Pages go here
Page1(),
Page2(),
Page3(),
],
)
In this case, you need to provide all the pages upfront, and the PageView widget will manage the state internally.
PageView.builder is used when you have a large or dynamically changing number of pages that you want to display in a PageView. Instead of providing all the pages upfront, you provide a builder function that generates the pages on-demand as the user scrolls through the PageView. For example:
PageView.builder(
itemCount: itemCount,
itemBuilder: (context, index) {
// Generate and return a page based on the index
return Page(index);
},
)
In this case, the itemCount represents the total number of pages, and the itemBuilder function is called for each page. The itemBuilder function provides the BuildContext and the index of the page being built. You can use this information to generate and return the appropriate page widget.
The choice between PageView and PageView.builder depends on your specific use case. If you have a fixed number of pages or a small number of pages that can be provided upfront, PageView is a simple and straightforward option. If you have a large number of pages or the number of pages can change dynamically, PageView.builder allows you to generate pages on-demand, improving performance and memory usage.