PageView Flutter With Example
This tutorial helps you to integrate pageview widget to slide pages in flutter applications. PageView widget is used to generate scrollable pages in flutter applications.
We can use pageview by multiple ways. We can use simple pageview with fixed number of pages. We can also use builder function of pageview to generate dynamic amount of pages. We can also customize pageview using custom method of pageview widget.
Home Screen
@override
_HomeScreenState createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
SizedBox(
height: 15,
),
RaisedButton(
textColor: Colors.white,
color: Colors.deepOrangeAccent,
child: Text(“Basic”, style: TextStyle(fontSize: 25)),
onPressed: () {
Navigator.push( context, MaterialPageRoute(builder: (context) => BasicPageScreen()), );
},
),
SizedBox(
height: 15,
),
RaisedButton(
textColor: Colors.white,
color: Colors.teal,
child: Text(“Vertical”, style: TextStyle(fontSize: 25)),
onPressed: () {
Navigator.push( context, MaterialPageRoute( builder: (context) => VerticalPageViewScreen()),);
},
),
SizedBox(
height: 15,
),
RaisedButton(
textColor: Colors.white,
color: Colors.blue,
child: Text(“Viewport Fraction”, style: TextStyle(fontSize: 25)),
onPressed: () {
Navigator.push( context, MaterialPageRoute( builder: (context) => ViewPortFractionPageViewScreen()), );
},
),
SizedBox(
height: 15,
),
RaisedButton(
textColor: Colors.white,
color: Colors.deepPurple,
child: Text(“Page Snapping”, style: TextStyle(fontSize: 25)),
onPressed: () {
Navigator.push( context, MaterialPageRoute( builder: (context) => PageSnappingPageViewScreen()), );
},
),
SizedBox(
height: 15,
),
RaisedButton(
textColor: Colors.white,
color: Colors.pink,
child: Text(“Scroll Physics”, style: TextStyle(fontSize: 25)),
onPressed: () {
Navigator.push( context, MaterialPageRoute(builder: (context) => ScrollPhysicsPageViewScreen()), );
},
),
],
),
),
),
);
}
}
Basic PageView Flutter
children: <Widget>[
Container(
color: Colors.pinkAccent,
padding: EdgeInsets.all(50),
child: Column(
children: [
SizedBox(height: 75),
Image.asset(‘images/premier_league_logo.jpg’),
SizedBox(height: 25),
Text(‘Premier League’, style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold, fontSize: 25, decoration: TextDecoration.none),)
],
),
),
Container(
color: Colors.deepOrangeAccent,
padding: EdgeInsets.all(50),
child: Column(
children: [
SizedBox(height: 75),
Image.asset(‘images/laliga_logo.png’),
SizedBox(height: 25),
Text(‘La Liga’, style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold, fontSize: 25, decoration: TextDecoration.none),)
],
),
),
Container(
color: Colors.redAccent,
padding: EdgeInsets.all(50),
child: Column(
children: [
SizedBox(height: 75),
Image.asset(‘images/bundesliga_logo.jpg’),
SizedBox(height: 25),
Text(‘Bundesliga’, style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold, fontSize: 25, decoration: TextDecoration.none),)
],
),
),
Container(
color: Colors.blueAccent,
padding: EdgeInsets.all(50),
child: Column(
children: [
SizedBox(height: 75),
Image.asset(‘images/serie_a_logo.jpg’),
SizedBox(height: 25),
Text(‘Serie A’, style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold, fontSize: 25, decoration: TextDecoration.none),)
],
),
),
Container(
color: Colors.amberAccent,
padding: EdgeInsets.all(50),
child: Column(
children: [
SizedBox(height: 75),
Image.asset(‘images/ligue_one_logo.png’),
SizedBox(height: 25),
Text(‘Ligue 1’, style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold, fontSize: 25, decoration: TextDecoration.none),)
],
),
),
],
);
Vertical PageView Flutter
By default pages can scroll in horizontal direction. We can also change orientation of pageview widget with the help of scrollDirection parameter.
scrollDirection: Axis.vertical,
);
Viewport Fraction
We can also make pageview widget like carousel slider by setting viewportfraction parameter less than 1.0.
viewportFraction: 0.8
);
PageView(
controller: pageController,
);
Page Snapping
By default you can scroll full width of page and slide only one page at a time. Using pagesnapping property of pageview widget, we can scroll smoothly and we do not have to require to stop at any particular spot.
pageSnapping: false,
);
Scroll Physics
We can change behavior of pageview widget when it reaches to first or last page.
physics: BouncingScrollPhysics(),
);
