Flutter PageView Widget
The PageView widget allows the user to transition between different screens in their flutter application. All you need to set it up are a PageViewController and a PageView.
If you’re looking for the best Flutter app development company for your mobile application then feel free to contact us at — support@flutterdevs.com.
Table Of Contents
Introduction:
A page view is a simple way to swipe the pages in the flutter application. It works in both horizontal and vertical ways. A PageView is a widget that generates the pages of the screen that are scrollable. The pages can be fixed or repeated pages that are built by the builder function. PageView behaves like ListView in constructing the elements.
Properties of PageView:
> allowImplicitScrolling:- This property takes in a boolean value as the object. It controls whether to allocate implicit scrolling to the widget’s page.
Implementationfinal
bool allowImplicitScrolling;> childrenDelegate:- A delegate that provides the children for the PageView.
Implementation
final SliverChildDelegate childrenDelegate;> clipBehavior:- The content will be clipped (or not) according to this option.
Implementation
final Clip clipBehavior;> controller:- An object that can be used to control the position to which this page view is scrolled.
Implementation
final PageController controller;> dragStartBehavior:- Determines the way that drags start behavior is handled.
Implementation
final DragStartBehavior dragStartBehavior;> onPageChanged:- Called whenever the page in the center of the viewport changes.
Implementation
final ValueChanged<int>? onPageChanged;> padEnds:- Whether to add padding to both ends of the list.
Implementation
final bool padEnds;> physics:- How the page view should respond to user input.
Implementation
final ScrollPhysics? physics;> restorationId:- Restoration ID to save and restore the scroll offset of the scrollable.
Implementation
final String? restorationId;> reverse:- It defines the scrolling direction. By default, it is set to false.
Implementation
final bool reverse;> scrollDirection:- The axis along which the page view scrolls.
Implementation
final Axis scrollDirection;Implementation:
First, we have to create a new Flutter Project with the name pageview_flutter_demo. Then we start coding to implement the PageView in the flutter application. We use PageController inside the state of a statefulWidget and initialize it inline or in the init() method. And create an integer variable _curr and pass the initial value zero.PageController controller = PageController();
int _curr = 0;
In BuildContext(), we define Scaffold. In the appbar, we define the name and center tile.
AppBar(
centerTitle: true,
title: const Text('PageView'),
backgroundColor: Colors.lightBlueAccent,
),After this, we pass PageView in the Scaffold body. In PageView Widget, first, we have to pass true at allowImplicitScrolling because It controls whether to allocate implicit scrolling to the widget’s page. and set the scroll direction as horizontal we can also set it as vertical. and pass the controller in the controller. After all this, we have to set the value at onPageChangeso, for page change we use setState in which we pass the _curr equals to num.
PageView(
allowImplicitScrolling: true,
children: _list,
scrollDirection: Axis.horizontal,
controller: controller,
onPageChanged: (num) {
setState(() {
_curr = num;
});
},
),And at last, we have to pass the children, In children, we pass the _list. We already create a list.
final List<Widget> _list = <Widget>[
Center(
child: Pages(
text: "Page One",
color: Colors.teal,
)),
Center(
child: Pages(
text: "Page Two",
color: Colors.red.shade100,
)),
Center(
child: Pages(
text: "Page Three",
color: Colors.grey,
)),
Center(
child: Pages(
text: "Page Four",
color: Colors.yellow.shade100,
))
];In this list, we use text and color so for this we create a stateless Widget with the name Pages in this we create two constructor text and color.
class Pages extends StatelessWidget {
final text;
final color;
Pages({this.text, this.color});
@override
Widget build(BuildContext context) {
return Container(
color: color,
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
text,
textAlign: TextAlign.center,
style: const TextStyle(
fontSize: 30,
fontWeight: FontWeight.w400),
),
]),
),
);
}
}If the properties are:
scrollDirection: Axis.vertical,
reverse: true,
controller: controller,When we run the application, we ought to get the screen’s output like the underneath screen video.
And If the properties are:
scrollDirection: Axis.horizontal,
controller: controller,When we run the application, we ought to get the screen’s output like the underneath screen video.
Conclusion:
In this article, we learn how to implement PageView Widget in Flutter Application. In this, we learn many things like the axis of scroll direction, reverse, physics, etc.
❤ 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 PageView Widget In the Flutter Application :
GitHub – flutter-devs/pageView_flutter-
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! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.
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.
