FlutterFlow Docs
Search…
PageView
The PageView widget is used to create swipeable pages. It contains a list of scrollable pages that you can swipe either horizontally or vertically.
For example, you can use the PageView widget to create onboarding screens, an app that shows a short video on swipe up or down just like Instagram, TikTok, Youtube shorts, etc.

Add a PageView to Your Project

To add the PageView widget in your project:
Simply drag the PageView widget from the Layout Elements tab (in the Widget Panel) or add it directly from the widget tree.
The default PageView comes with 3 pages. It's called PageView Page and they are named Page1, Page 2, and Page 3. Each PageView Page contains one Image widget that shows a random image.

Customizing the PageView

You may want to customize the default PageView to match your design. You can replace the Image widget (inside PageView Page) with any widget.
Here's an example of how you can use a PageView widget in your project:
    Select the PageView from the widget tree or from the canvas area.
    Move to the Property Editor and scroll down to the Page View Properties section and set the Height to inf (Click on
    icon).
    Select the Image widget (inside the first PageView Page) and wrap it inside the Stack by right-clicking on Image, select the Wrap Widget option and then click on Stack. You can also select the Image widget and then hit the shortcut (⌘ + B) to open up the wrap widget popup.
    Select the Image widget again and set its Width and Height property to inf (
    ).
    Select the Stack widget and add the Text widget from the Base Elements tab or add it directly from the widget tree.
    Select the newly created Text widget and change the name to Onboarding Page 1. Set its Theme Style to Title 1 and change Text Color to any color you like.
    Select the Stack widget, Move to Property Editor and scroll down to the Stack Properties section. Set the Default Child Vertical Alignment to 0.9.
To change the PageView Page displayed in the UI Builder:
    Select the PageView widget from the widget tree or from the canvas area.
    Move to Property Editor and identify the Active Page section.
    Change it to the page you want to view.
Modifying the rest of the two pages using the instructions above looks like this:

Adding or Removing Page

To add a new Page:
    Select the PageView widget from the widget tree or from the canvas area.
    Move to Property Editor and identify the Active Page section.
    Click on the Dropdown and select + Add Page.
To remove any existing Page:
    Select the PageView Page (which you want to remove) from the widget tree or from the canvas area.
    Hit the Delete button on the keyboard and the Page will be deleted from the widget tree. You can also delete the page by right-clicking in the widget tree and selecting Cut.

Changing the Properties

The Properties Panel can be used to customize the behavior of your PageView widget.

Add Padding

Adding a padding value will change the overall size of the PageView widget.
To add a Padding:
    Select the PageView from the widget tree or from the canvas area.
    Move to the Property Editor and navigate to the Padding section.
    Enter the desired value.
    Click on the Refresh icon
    to reset the values.
Use the
Lock button to change the Left, Top, Right, and Bottom padding all at the same time. Unlocking will allow you to modify each value separately.

Changing the Page Size

In some cases, you may want to change the size of the pages so that it looks like an Imag slideshow.
To change the size of the page:
    Select the PageView from the widget tree or from the canvas area.
    Move to the Property Editor and scroll down to the Page View Properties section.
    Enter/change the value in the Height property to change the height of the overall PageView.

Changing the scroll direction

By default, the PageView comes with a horizontal scroll for the pages. You can change the scroll direction using the Axis property.
To change the scroll direction:
    Select the PageView from the widget tree or from the canvas area.
    Move to the Property Editor and scroll down to the Page View Properties section.
    Nagivate to the Axis dropdown (below Width and Height), change it to Vertical.

Enable/Disable swipe to scroll

The PageView widget allows you to change the page using a swipe gesture as well as clicking on the indicator (3 dots at the bottom that indicates which page is being viewed). You can change this behavior and only allow changing the page on click of the indicator.
To disable the swipe to scroll:
    Select the PageView from the widget tree or from the canvas area.
    Move to the Property Editor and scroll down to the Page View Properties section.
    Remove the checkmark from Allow Swipe Scrolling (Click on it).
    Click on Allow Swipe Scrolling again to get back the swipe to scroll.

Making Indicator Appear over the Page

In the example above, the indicator (3 dots at the bottom that indicates which page is being viewed), was displayed below the page content. You can change this behavior using the Margin property.
To make the Indicator appear over the page:
    Select the PageView from the widget tree or from the canvas area.
    Move to the Property Editor and scroll down to the Page View Properties section.
    Find the Margin property and change the B (Bottom) value to 0.
    You can also click on the Refresh icon
    to reset the values.

Customize the Indicator

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.

Changing the Indicator Position

To change the indicator position:
    Select the PageView from the widget tree or from the canvas area.
    Move to the Property Editor and scroll down to the Indicator Properties section.
    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.
    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.

Add Padding around Indicator

To add padding:
    Select the PageView from the widget tree or from the canvas area.
    Move to the Property Editor and scroll down to the Indicator Properties section.
    Find the Padding property and enter the values in L (Left), T (Top), R (Right), and B (Bottom) property to get the desired result.
By default, the PageView widget adds a padding of value 10px at the bottom. However, you are free to change this value as needed.

Changing the Color for Active/Inactive Indicator

To change the color for active (page being viewed) and inactive indicator:
    Select the PageView from the widget tree or from the canvas area.
    Move to the Property Editor and scroll down to the Indicator Properties section.
    Find the Active Color property. Click on the already selected color code (blue color), and enter the new color code. You can also click on the color icon (
    ) and choose the new color.
    Similarly, change the color for the Inactive Color property as well.

Changing the Indicator Dot size

To change the width and height of the Indicator:
    Select the PageView from the widget tree or from the canvas area.
    Move to the Property Editor and scroll down to the Indicator Properties section.
    Change the width and height of the indicator dot by entering values in the Dot Width and Dot Height respectively.

Changing the Width of Active Dot

The active dot in the Indicator represents the currently visible page in PageView. That means if we are on the second page, the second dot in the indicator will be selected.
To change the width of the active dot in the indicator:
    Select the PageView from the widget tree or from the canvas area.
    Move to the Property Editor and scroll down to the Indicator Properties section.
    Change the value in the Expansion Factor property.
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.

Adjusting a Space between the Indicator Dots

To change the space between the indicator dots:
    Select the PageView from the widget tree or from the canvas area.
    Move to the Property Editor and scroll down to the Indicator Properties section.
    Enter the value in the Spacing property.

Adjusting the Rounded Corner of Indicator Dots

To change the radius of dots:
    Select the PageView from the widget tree or from the canvas area.
    Move to the Property Editor and scroll down to the Indicator Properties section.
    Enter the value in the Border Radius property.
Setting the Border Radius value to 0 will make the indicator dots a rectangular shape.

Showing only the Border

To show only the border of indicator dots (i.e. transparent fill color) :
    Select the PageView from the widget tree or from the canvas area.
    Move to the Property Editor and scroll down to the Indicator Properties section.
    Checkmark the Outline check box.

Hiding the Indicator

To completely hide the indicator:
    Select the PageView from the widget tree or from the canvas area.
    Move to the Property Editor and scroll down to the Indicator Properties section.
    Remove the checkmark from Show Indicator (Click on it).
    Make sure you have the Allow Swipe Scrolling box checked.
Last modified 22d ago