Flutter Widget Guide — PageView Widget in 5 mins or less.

This is Part 9 in the series where I’ll cover all the Flutter widgets that are in this YouTube playlist. I have created my own widget guide which I believe will help people who are new in this space. Please have a look at this GitHub project to explore all the amazing widgets.

Click here to ⏬ the App available on Google Play Store. 📱

My main motive behind this series is to keep things to the point. Your time is precious, let’s not waste it and get started.

There might come a time when you would want to have a screen with pages that contain different widget groups. You would want your user to easily switch between the pages and interact with the widgets on the screen. The use cases can be many, for example, there might be an onBoarding screen in your app that gives an initial introduction telling the user what your app has to offer. A swipeable screen is a decent way via which you can allow the user to explore different parts of your app and Flutter has a widget just for that.

PageView Widget

1 | What?

This widget will help you create a scrollable list of pages on your screen. PageView widget takes a fixed list of children or you can customize it to change its child count on demand depending on change in the data source (network or database) with the help of PageView.builder. The orientation property of the PageView widget can be set to either vertical or horizontal depending on your use case. You can also provide this widget with a scroll physics for custom scroll behavior.

2 | Wondering how it works?

Have a look at the Code snippet below.

Below is the visual representation of the code above.

3 | Explanation

In the above example, we have a PageView with 3 children, a controller, a scroll direction (initially set to horizontal) and an optional physics property which you can choose to enable. Here, we have an option on the top right corner to switch between the scroll directions.

Note: When you switch between the directions on the PageView that is already in the widget tree, then it’s behavior is a bit odd. The children don’t snap properly, and to handle this, I manage the ViewPort dimensions pro grammatically by adding —

controller.position.applyViewportDimension(
    scrollDirection == Axis.vertical
        ? _screenSize.height
        : _screenSize.width);

The scroll and snap behavior is as expected if you build the PageView widget with the scroll direction already set.

You can also provide the PageView widget with a custom scroll physics like BouncingScrollPhysics(). BouncingScrollPhysics will create an effect where the boundry element is pulled back in the view if the user tries to scroll further.

The pageSnapping property is true by default but you can set it to false to make it behave like a ListView widget when the user scrolls.

Flutter Widget Guide — FAB Widget in 5 mins or less.

Previous 👆

Up next 👇

Flutter Widget Guide — Table Widget in 5 mins or less.

How many claps does this article deserve?

If you find this article useful, please click the 👏 button and share to help others find it! Feel free to clap many times (10💥, 20💥 or maybe 50💥 ?) It fuels my focus to write more of it.

Connect with me on LinkedIn or say hi on Twitter, mentioning this article. You can drop a mail at annsh29@gmail.com as well.

See more in the series:

Flutter Widget Guide — Index

Have a wonderful day 🙂

Flutter Community (@FlutterComm) | Twitter