Build a Folding Scroll With PageView Builder in Flutter

A LOUIS VUITTON like UI

Photo by Taylor Wilcox on Unsplash

In this article, we are going to create a horizontal scroll of list view similar to the LOUIS VUITTON mobile app.

The final app works as follows:

Video Tutorial

Folding Scroll view

Before deep-diving into the coding let's discuss the widgets going to be used in this application.

PageView

A PageView is a widget that generates the pages of the screen that are scrollable. The pages can be fixed or repeating pages that is built by the builder function.

PageView behaves like ListView in constructing the elements. PageView also allows the user to transition between different screens in the Flutter application.

Constructors of PageView class

PageView({Key key, 
Axis scrollDirection, 
bool reverse, 
PageController controller, 
ScrollPhysics physics, 
bool pageSnapping, 
void Function(int) onPageChanged, 
List<Widget> children, 
DragStartBehavior dragStartBehavior, 
bool allowImplicitScrolling})

Properties of PageView Widget:

• scrollDirection: It defines on which axis the page is scrolled i.e Vertical or Horizontal
• reverse: It defines the scrolling direction. It is set to false by default.
• controller: It lets us manipulate which page is visible in a PageView.
• physics: It defines how the page animates at the endpoint of the page when it can’t be dragged.
• pageSnapping: It is useful for custom scroll behavior. It takes the boolean value.
• onPageChanged: It is a function that is triggered when there is a change in page.
• children: It holds the list of widgets.
• dragStartBehaviour: This property holds DragStartBehavior enum (final) as the object. It controls the way in which the drag behavior will start to be registered.
• allowImplicitScrolling: This property takes in a boolean value as the object. It controls whether to allocate implicit scrolling to the widget’s page.

PageView.builder

PageView.builder creates a scrollable list that works page by page using widgets that are created on-demand.

This constructor is appropriate for page views with a large (or infinite) number of children because the builder is called only for those children that are actually visible.

Providing a non-null itemCount lets the PageView compute the maximum scroll extent.

Properties of PageView.builder Widget

It holds all the properties of PageView having some of its own properties.

• itemBuilder: It will be called only with indices greater than or equal to zero and less than itemcount.
• restoralionID: The restorationID takes in a string as the object. It is used to save the scroll position and later restore it.
• clipBehaviour: The content will be clipped (or not) according to this option.
• padEnds: Whether to add padding to both ends of the list.

Stack

Stack is a built-in widget of the Flutter SDK that allows users to keep the widgets on top of each other making layers of widgets. The first widget is the bottommost item, and the lastwidget is the topmost item.

Some of the key points of the Stack widgets are:

• The child in a stack can either be positioned or non-positioned.
• Positioned children are those wrapped in a Positioned widget that has at least one non-null property.
• The stack sizes itself to contain all the non-positioned children, which are positioned according to alignment (which defaults to the top-left corner in left-to-right environments and the top-right corner in right-to-left environments).
• The positioned children are then placed relative to the stack according to their top, right, bottom, and left properties.
• The alignment attribute can be used to change the alignment of the widgets.

Let’s Dig In

First, we create the data that are going to use in our application.

Create the dummy_data.dart inside the lib folder. Here we place the array of items.

dummy_data.dart:

dummy_data.dart

The data is ready, now let's create the widgets that would be the item of the pageview. Create the page_view_item.dart inside the lib folder.

page_view_item.dart

page_view_item.dart

Moving forward we create our homepage.dart file:

First, we configure our page view and create the PageController where we provide the viewportFraction.

final _controller = PageController(    viewportFraction: 0.5,  );

ViewPortFraction

It defines the fraction of the viewport that each page should occupy. Defaults to 1.0, which means each page fills the viewport in the scrolling direction.

When our controller is set we then calculate the width of the single items of the pageview.

late final _itemWidth =MediaQuery.of(context).size.width * _controller.viewportFraction;

And then we initialize the controller inside the initState.

@override  void initState() {    
super.initState();
_controller.addListener(() => setState(() {          
_page = _controller.page!;        
}));  }

This is how our homepage.dart file would look.

homepage.dart:

Let’s get connected

We can be friends. Find on Facebook, Linkedin, Github, Youtube, BuyMeACoffee, and Instagram.

Visit: Flutter Junction

Contribute: BuyMeACoffee

Conclusion

I hope this article is helpful to you and you learned new things. I have used various things in this article that might be new for some of you.

GitHub - nbnD/lvscroll

Want to Connect?
Find me on Facebook, Linkedin, Github, Instagram.