Implement Folding Scroll In Flutter
Flutter, almost everything is a widget — even format models are widgets. The photos, symbols, and text you find in a Flutter application are on the widgets. Anyway, things you don’t see are extra widgets, similar to the rows, columns, and grids that arrange, oblige and align the conspicuous widgets.
In this blog, we will explore the Implement Folding Scroll In Flutter. We will see how to implement a demo program of the folding scroll and we are going to create a folding (horizontal) scroll of list view using PageView.builder in your flutter applications.
PageView.builder constructor – PageView class – widgets library – Dart API
Creates a scrollable list that works page by page using widgets created on-demand. This constructor is…api. flutter.dev
Table Of Contents::
Introduction:
PageView.builder makes a scrollable list that works page by page utilizing widgets spurred on interest. This constructor is proper for page visits with an enormous (or boundless) number of children because the builder is called exclusively for those children that are noticeable.
Giving a non-null itemCount allows the PageView to figure the most extreme scroll extent.
Demo Module::
The above demo video shows how to implement Folding Scroll in a flutter. It shows how the Folding Scroll will work using the PageView.builder in your flutter applications. It shows when the user swipe left to right then, images will scroll and overlap with other images. It will be shown on your device.
Constructor:
To utilize PageView.builder, you need to call the constructor underneath:
PageView.builder({
Key? key,
this.scrollDirection = Axis.horizontal,
this.reverse = false,
PageController? controller,
this.physics,
this.pageSnapping = true,
this.onPageChanged,
required IndexedWidgetBuilder itemBuilder,
ChildIndexGetter? findChildIndexCallback,
int? itemCount,
this.dragStartBehavior = DragStartBehavior.start,
this.allowImplicitScrolling = false,
this.restorationId,
this.clipBehavior = Clip.hardEdge,
this.scrollBehavior,
this.padEnds = true,
})All fields marked with @required must not be empty in the above Constructor.
Properties:
There are some properties of PageView.builder are:
- > itemBuilder: This property is called only with indices greater than or equal to zero and less than
itemcount. - > restorationId: This property is used to take in a string as the object. It is used to save the scroll position and later restore it.
- > clipBehavior: This property is used to the content will be clipped (or not) according to this option.
- > padEnds: This property is used to add padding to both ends of the list.
- > scrollDirection: This property is used to the axis along which the page view scrolls. Defaults to [Axis.horizontal].
- > onPageChanged: This property is used to call whenever the page in the center of the viewport changes.
Implementation:
Step 1: Add the assets
Add assets to pubspec — yaml file.
assets:
- assets/
Step 2: Run flutter packages get in the root directory of your app.
How to implement code in dart file :
You need to implement it in your code respectively:
Create a new dart file called dummy_data_model.dart inside the lib folder.
In this dart file, we will create a dummyDataModel. Inside we will add the array of the item.
var dummyDataModel = [
"assets/demo_1.png",
"assets/img.png",
"assets/logo.png",
"assets/demo_2.png",
"assets/powered_by.png",
"assets/demo_3.png",
"assets/demo_4.png",
];Create a new dart file called page_view_item.dart inside the lib folder.
In this dart file, we will create PageViewItem class. In this class, we will add int index, string image, and double width. In the build method, we will return Inkwell. Inside, we will add onTap and its child we will add a Card widget. In this widget, we will add elevation, shape, and Image. asset().
import 'package:flutter/material.dart';
class PageViewItem extends StatelessWidget {
final int index;
final String img;
final double width;
const PageViewItem({
Key? key,
required this.index,
required this.width,
required this.img,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return InkWell(
onTap: () => print(index),
child: Card(
elevation: 8,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(1.0),
),
child: Image.asset(
img,
fit: BoxFit.fill,
width: width,
),
),
);
}
}Create a new dart file called home_page.dart inside the lib folder.
First, we will create a double variable _page equal to zero, and the index of the left-most element of it to be displayed.
double _page = 0;
int get _firstItemIndex => _page.toInt();Presently, we configure our page view and make the PageController where we give the viewportFraction. It characterizes the negligible portion of the viewport that each page ought to possess. Defaults to 1.0, implying each page fills the viewport in the looking over heading.
final _controller = PageController(
viewportFraction: 0.5,
);Now, we will calculate the width of the single items on the pageview.
late final _itemWidth =
MediaQuery.of(context).size.width * _controller.viewportFraction;Then, we will create an initState() method. In this method, we will add the controller inside the initState.
@override
void initState() {
super.initState();
_controller.addListener(() => setState(() {
_page = _controller.page!;
}));
}In the body, we will add a Column widget with crossAxisAlignment and mainAxisAlignment as the center. Inside, the widget we will add the Stack widget.
Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
const SizedBox(height: 10,),
Stack(
children: [
Positioned.fill(
child: Align(
alignment: Alignment.centerLeft,
child: SizedBox(
height: 200,
width: _itemWidth,
child: FractionallySizedBox(
child: PageViewItem(
index: _firstItemIndex,
width: _itemWidth,
img: dummyDataModel[_firstItemIndex],
),
),
),
),
),
SizedBox(
height: 200,
child: PageView.builder(
padEnds: false,
controller: _controller,
itemBuilder: (context, index) {
return Opacity(
opacity: index <= _firstItemIndex ? 0 : 1,
child: PageViewItem(
index: index,
width: _itemWidth,
img: dummyDataModel[index],
),
);
},
itemCount: dummyDataModel.length,
),
),
],
),
],
),In this Stack widget, we will add FractionallySizedBox. Inside, we will add PageViewItem class. In this class, we will add index, width, and img. Then, we will add SizedBox with height. Its child, we will add PageView.builder. Inside, we will add padEnds, controller, itemBuilder and itemCount.
When we run the application, we ought to get the screen’s output like the underneath screen capture.
Code File:
import 'package:flutter/material.dart';
import 'dummy_data_model.dart';
import 'page_view_item.dart';
class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);
@override
State<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
double _page = 0;
int get _firstItemIndex => _page.toInt();
final _controller = PageController(
viewportFraction: 0.5,
);
late final _itemWidth =
MediaQuery.of(context).size.width * _controller.viewportFraction;
@override
void initState() {
super.initState();
_controller.addListener(() => setState(() {
_page = _controller.page!;
}));
}
@override
void dispose() {
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.grey[200],
appBar: AppBar(
automaticallyImplyLeading: false,
title: const Text("Flutter Folding Scroll Demo"),
backgroundColor: Colors.cyan,
centerTitle: true,
),
body: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
const SizedBox(
height: 10,
),
Stack(
children: [
Positioned.fill(
child: Align(
alignment: Alignment.centerLeft,
child: SizedBox(
height: 200,
width: _itemWidth,
child: FractionallySizedBox(
child: PageViewItem(
index: _firstItemIndex,
width: _itemWidth,
img: dummyDataModel[_firstItemIndex],
),
),
),
),
),
SizedBox(
height: 200,
child: PageView.builder(
padEnds: false,
controller: _controller,
itemBuilder: (context, index) {
return Opacity(
opacity: index <= _firstItemIndex ? 0 : 1,
child: PageViewItem(
index: index,
width: _itemWidth,
img: dummyDataModel[index],
),
);
},
itemCount: dummyDataModel.length,
),
),
],
),
],
),
);
}
}
Conclusion:
In the article, I have explained the basic structure of Folding Scroll in a flutter; you can modify this code according to your choice. This was a small introduction to Folding Scroll On User Interaction from my side, and it’s working using Flutter.
I hope this blog will provide you with sufficient information on Trying up the Folding Scroll in your flutter projects. We will show you what an Introduction is?. Show the properties and constructor, of Folding Scroll. Make a demo program for working in your flutter applications. So please try it.
❤ ❤ Thanks for reading this article ❤❤
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
GitHub Link:
find the source code of the Flutter Folding Scroll Demo:
GitHub – flutter-devs/flutter_folding_scroll_demo
A new Flutter project. This project is a starting point for a Flutter application. A few resources to get you started…github.com
Feel free to connect with us:
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! For any flutter-related queries, you can connect with us on Facebook, GitHub, Twitter, and LinkedIn.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
