Comment on page
The PageView is useful when you have a collection of pages that you want to display one at a time, especially if you want the user to be able to swipe between them, such as in an onboarding screen, an app that shows a short video by swiping up or down just like Instagram, TikTok, Youtube shorts, etc.
To add the PageView widget to your app:
- 2.By default, it adds three pages and shows the first one in the UI builder. In the widget tree, it is represented as PageView Page. To see another page in the UI builder, move to the Properties Panel > set the Active Page to the page you want to see.
- 3.To add a new page, move to the Properties Panel > Active Page > click + Add Page.
- 4.To delete any page, select the PageView Page (which you want to delete) from the widget tree or the canvas area and press the Delete key on the keyboard.
Adding PageView widget
The PageView widget is an incredibly versatile widget that can be utilized in a variety of situations to create interactive applications. For example, you might want to use it in an app that involves reading books, magazines, or similar content to mimic the experience of flipping through pages.
In such situations, you might consider adding an infinite scroll on this widget, which automatically loads the new pages as you swipe.
By default, the PageView comes with a horizontal scroll for the pages. To change the scroll direction to vertical, move to the Properties Panel > Page View Properties > set the Axis to Vertical.
Changing the scroll direction
This widget allows you to change the page using a swipe gesture as well as clicking on the indicator (3 dots at the bottom indicate which page is being viewed). You can change this behavior and only allow changing the page on click of the indicator.
To do so, move to the Properties Panel > Page View Properties > disable Allow swipe scrolling.
Enable/disable swipe to scroll
Sometimes you might want to rebuild the page on which the PageView widget is contained. i.e., rebuilding the outside of the page view widget. You might want to load data or show/hide UI elements based on the page currently being displayed. For example, you could display a floating action button only on a certain page or show/hide certain widgets based on the page index.
To do so, move to the Properties Panel > Page View Properties > turn on the Update Page on Swipe.
Here's an example of displaying the current page index on a page that contains the PageView widget.
Update page on swipe
You might want to trigger an action when the page is swiped in the PageView widget. For example, you might want to load data for a specific page only when the user swipes to it instead of loading all the data upfront.
To trigger action on swipe:
- 1.Select the widget from the widget tree or canvas area.
- 2.Select Actions from the Properties panel (the right menu), and click + Add Action.
- 3.You will notice that the Type of Action (aka callback) is already set to On Page Swipe. That means actions added under this will be called whenever the page is swiped.
Trigger action on swipe
You might want to display a specific page as soon as it is loaded. To do so, move to the Properties Panel > Page View Properties > enter the Initial Page Index value. Please note that the page index starts from 0. So, if you want to set page 1, you should enter 0. If you want to set page 2, you should enter 1, and so on.
Setting initial page index
Margin adds a space between the PageView content and its border. To change the margin, select the PageView widget, move to the Properties Panel > Page View Properties > find the Margin property, and change the values.
The Indicator helps you identify which page is currently being viewed. You can change the appearance of the Indicator using the various properties available under the Indicator Properties section.
To customize the indicator:
- 1.Select the PageView widget, and move to the Properties Panel > Indicator Properties.
- 2.To change the indicator position,
- 1.Find the Horizontal Alignment property, Adjust the value by using the slider or entering a value. A value of -1 will place the Indicator all the way to the left, while a value of 1 will place the Indicator all the way to the right.
- 2.Similarly, you can also change the indicator position vertically using the Vertical Alignment property. A value of -1 will place the Indicator all the way to the top, while a value of 1 will place the Indicator all the way to the bottom.
- 3.To add padding around the indicator, find the Padding property and enter the values in L (Left), T (Top), R (Right), and B (Bottom) properties to get the desired result.
- 5.To change the indicator dot size, use the Dot Width and Dot height properties.
- 6.To change the size of an active dot, you can use the Expansion Factor property. For example, if you enter 2, the active dot size will be twice its normal size.
The width of the active dot is calculated by multiplying the value of the Dot Width property with the value of the Expansion Factor property. That means if Dot Width is set to 40 and Expansion Factor is set to 2, then the width of the Active dot will be 80.
- 7.To add space between the indicator dots, use the Spacing property.
- 8.To adjust the rounded corner of indicator dots, use the Border Radius property.
- 9.To show only the border, enable the Outline toggle.
- 10.if you want to hide the indicators, disable the Show Indicator toggle.
If you use the PageView widget to create the onboarding experience, you may probably want to allow users to scroll the pages on button press (e.g., next, previous, and skip buttons) in addition to the swipe to scroll. You can do so by adding the PageView and then defining the Control Page View action on the Tap of a Button widget.
Scroll page view on button press
Here's an example of scrolling PageView on button press:
Adding a pageview widget with a button
If you prefer watching a video tutorial, here's the one for you: