In this tutorial we will learn how to use Pageview widget in Flutter with example.
What is Pageview In Flutter?
PageView is a widget in flutter which is used to make scrollable pages on the screen. This can be either fixed list of pages of repeated list of a single page by using its builder function. This is similar to listview in flutter, but the difference is that it loads the entire new page or the screen instead of half of the screen or the page like in listview.
Types Of PageView
- PageView
- PageView.builder
- PageView.custom
1. PageView
This is the default type of PageView. It has fixed types of pages which can be scroll horizontal or in vertical direction. By default its scrolling direction is horizontal. The parent widget of the main widget should be a PageView(). See the below example.
final pagecontroller = PageController();
Pagecontroller controls the status of current page as shown in the below example. You can call widgets inside this as we called a HomePage() widget.
import 'package:flutter/material.dart';
import 'package:flutter_testing_project/HomePage.dart';
class TestClass extends StatefulWidget {
const TestClass({Key key}) : super(key: key);
@override
_TestClassState createState() => _TestClassState();
}
class _TestClassState extends State<TestClass> {
final pagecontroller = PageController();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("PageView Demo"),
),
body: PageView(
controller: pagecontroller,
scrollDirection: Axis.vertical,
onPageChanged: (pagecontroller) {
setState(() {
print("pagecontoller = " + pagecontroller.toString());
});
},
children: [
Center(
child: Text(
"First",
style: TextStyle(fontSize: 28),
),
),
Center(
child: Text(
"Second",
style: TextStyle(fontSize: 28),
),
),
Center(child: HomePage())
],
),
);
}
}
2. PageView.builder
The PageView.builder is similar to the listview.builder. But it scrolls the complete page on one scroll. This renders the single widget upto the length of the list. The list can be fixed or dynamic which loads the data from an API.
In the below example we created a fixed list which contains some data. The best method is that you have to create a separate widget for PageView.builder and pass the data like in below example.
import 'package:flutter/material.dart';
class PageItem extends StatelessWidget {
String name;
PageItem(this.name);
@override
Widget build(BuildContext context) {
return Container(
margin: EdgeInsets.all(15),
child: Column(
children: [
Center(
child: Text(
name,
style: TextStyle(fontSize: 28),
),
),
],
),
);
}
}
3. PageView.custom
The PageView.custom is same as custom listview. You can learn it from here. There is no much difference this type.
Below is the screenshot of the above example. After using the code inside your project. You can scroll it and will see the result.
You can learn complete guide about the PageView from here.