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:
PageView
displays 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 thechildren
property 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,
PageView
supports infinite scrolling, which means it wraps around to the beginning when reaching the end or vice versa. This behavior can be controlled using theallowImplicitScrolling
property. - Page indicator:
PageView
does not provide a built-in page indicator. You can add a page indicator manually or use third-party packages likedots_indicator
orsmooth_page_indicator
for a pre-styled indicator. - Customization: You can customize the appearance and behavior of
PageView
using various properties such ascontroller
for programmatic page manipulation,onPageChanged
to listen for page changes, andpageBuilder
to define custom page transitions. - Nesting:
PageView
can be nested inside other scrollable widgets likeListView
orScrollView
to 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.