Flutter PageView Widget
Overview
A user may be required to navigate from one screen to another in an application. Page view Flutter gives a quick way to move between screens. A PageView widget allows your app's users to swipe/transition between multiple displays. You only need a PageViewController and a PageView to get started. A PageController may be used to control which page is shown in the view. A PageController, in addition to allowing you to adjust the pixel offset of the content within the PageView, also allows you to control the offset in terms of pages, which are viewport size increments. This post will teach us more about this widget and how to use it.
How to Use PageView Widget in Flutter?
A page view flutter widget in your app allows the user to scroll between different displays. You only need a PageViewController and a PageView to get started. It may either generate a set number of pages or utilize a builder function to generate pages as needed. When it comes to building items, the PageView widget is quite similar to the ListView widget. Using this constructor, you may create a PageView from an explicit list of widgets:
Let's look at how we can use PageView widget in our Flutter app. To use the page view flutter, follow the steps described below.
- Build a scaffold.
- Design the PageView as desired.
- Use PageController to construct a layout that controls which page is seen in the view.
PageController is used within the state of a statefulWidget and is initialized inline or via the init() function. PageView widget is passed in the Scaffold body. In the PageView Widget, we must first pass true to allowImplicitScrolling since it determines whether or not to allocate implicit scrolling to the widget's page and set the scroll orientation as horizontal. We may alternatively set it as vertical and pass the controller in the controller. We utilize setState for page changes and send the _curr equals to num in onPageChanged. We pass on the _list to children. We may create a list of pages for the pageview widget to display.
The syntax for the pageview widget may look like this.
Types of PageView Widget in Flutter
A page view flutter widget is a screen widget that creates scrollable pages. This might be a fixed list of pages or a builder function that generates recurring pages. In terms of element construction, PageView is comparable to ListView. PageViews are classified as follows:
1. PageView
This class renders a fixed list of children (pages) scrollable.
2. PageView.builder
This constructor, like ListView.builder, accepts an itemBuilder function and an itemCount. This, like a ListView.builder, creates children on demand. An endless list of pages can be created if the itemCount is set to null (not set).
3. PageView.custom
PageView.custom functions similarly to ListView.custom. It generates a scrollable list that operates on a page-by-page basis using a custom child model.
Properties of PageView Widget
| Property | Function |
|---|---|
| allowImplicitScrolling | The object for this attribute is a boolean value. It determines whether the widget's page will get implicit scrolling. |
| childrenDelegate | This property's object is of the SliverChildDelegate class. It gives the PageView widget children widgets. |
| clipBehavior | The Clip enum is used as the object for this attribute. It determines whether or not the content within the PageView widget is cropped. |
| controller | It's used to manage the pages. |
| dragStartBehavior | The object of this attribute is the DragStartBehavior enum (final). It governs how the drag behavior is logged at the beginning. |
| hashCode | As the object, the hashCode property tables in an int value. It reflects the object's status as it relates to the operator == comparison. |
| key | When a device goes from one branch of the widget tree to another, keys save its state. |
| onPageChanged | When a page changes, this is referred to as a page change. |
| padEnds | This attribute controls whether padding is added to both ends of the list. |
| pageSnapping | The PageView widget requires a boolean value to detect if page snapping is enabled or disabled. We may keep the page at intermediate values by using page snapping. This is accomplished by deactivating the pageSnapping property. |
| physics | It sets the page’s motion once you stop dragging. When the PageView widget hits the first or last page, you can adjust how it advances. On iOS, the default behavior is to bounce. Android’s default behavior is to halt. |
| restorationId | The object for the restorationID is a string. It is used to preserve and later restore the scroll position. |
| reverse | It specifies the direction of scrolling. It is set to false by default. |
| runtimeType | A representation of the object's runtime type. |
| scrollBehavior | Defines the scrolling behavior of the object. PageViews, like ListViews, can have configurable scrolling behavior. |
| scrollDirection | This property uses the Axis enum to determine the PageView's scroll axis, which might be vertical or horizontal. |
Methods in PageView Widget
A list that can be scrolled through page by page. A page view's children are all compelled to have the same size as the viewport. A PageController may be used to control which page is shown in the view. A PageController, in addition to allowing you to adjust the pixel offset of the content within the PageView, also allows you to control the offset in terms of pages, which are viewport size increments. The PageController may also be used to regulate the PageController.initialPage, which defines which page is displayed when the PageView is first formed, and the PageController.viewportFraction, which determines the page size as a fraction of the viewport size. There are several methods utilized in the pageview widget, so let's go over them one by one.
- createElement(): It builds a StatefulElement to control the position of this widget in the tree.
- createState(): It generates the mutable state for this widget at a specified point in the tree.
- debugDescribeChildren() This method returns a list of DiagnosticsNode objects that describe the offspring of this node.
- debugFillProperties(DiagnosticPropertiesBuilder properties): Add more characteristics connected with the node.
- noSuchMethod(Invocation invocation): When a nonexistent method or property is accessed, this method is invoked.
- toDiagnosticsNode({String? name, DiagnosticsTreeStyle? style}): Returns the object's debug representation, which is utilized by debugging tools like DiagnosticsNode.toStringDeep.
- toString(): This object's string representation.
- toStringDeep({String prefixLineOne = '', String? prefixOtherLines}): This node and its descendants are represented as a string.
- toStringShallow({DiagnosticLevel minLevel = DiagnosticLevel.debug}): Returns a thorough one-line description of the item.
- toStringShort(): A concise written explanation of the current widget.
Example Application
Let's have a look at an application that demonstrates pageview implementation in Flutter. This is main.dart file's source code.
Output: Your application will look like this.
Conclusion
- A page view provides a quick method to navigate around the pages of the Flutter application.
- A PageView is a widget that creates the scrollable pages of the screen.
- You only need a PageViewController and a PageView to get started.
- A PageView in your app allows the user to scroll between different displays.
- When it comes to building items, the PageView widget is quite similar to the ListView widget.
- PageController is used within the state of a statefulWidget and is initialized inline or via the init() function.
- PageView is passed in the Scaffold body.
- We may create a list of pages for the pageview widget to display and then pass it on to the children property.
- The types of PageView are PageView, PageView.builder, and PageView.custom.