PageView Widget in Flutter

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.

Constructor of PageView class:

Syntax:
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 sets the axis of scrolling (Vertical or horizontal).
  • reverse: It defines the scrolling direction. By default, it is set to false.
  • controller: It is used to control the pages.
  • physics: It sets the animation of page after stopped dragging.
  • onPageChanged: This is called when page change occurs.
  • children: It displays the list of widgets.

Example: 

The main.dart file.

Dart

filter_none

edit
close

play_arrow

link
brightness_4
code

import 'package:flutter/material.dart';
  
void main() {
  runApp(MyApp());
}
  
class MyApp extends StatelessWidget {
    
  // This widget is the root
  // of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'PageView',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      debugShowCheckedModeBanner: false,
      home: MyHomePage(),
    );
  }
}
  
class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}
  
class _MyHomePageState extends State<MyHomePage> {
  
   PageController controller=PageController();
  List<Widget> _list=<Widget>[
    new Center(child:new Pages(text: "Page 1",)),
    new Center(child:new Pages(text: "Page 2",)),
    new Center(child:new Pages(text: "Page 3",)),
    new Center(child:new Pages(text: "Page 4",))
  ];
  int _curr=0;
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey,
      appBar:AppBar(
        title: Text("GeeksforGeeks"),
        backgroundColor: Colors.green,
        actions: <Widget>[
          Padding(
            padding: const EdgeInsets.all(3.0),
            child: Text(
              "Page: "+(
                _curr+1).toString()+"/"+_list.length.toString(),textScaleFactor: 2,),
          )
        ],),
      body: PageView(
        children: 
          _list,
          scrollDirection: Axis.horizontal,
          
          // reverse: true,
          // physics: BouncingScrollPhysics(),
          controller: controller,
          onPageChanged: (num){
          setState(() {
            _curr=num;
          });
        },
      ),
      floatingActionButton:Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children:<Widget>[
          FloatingActionButton(
            onPressed: () {      
              setState(() {
               _list.add(
                new Center(child: new Text(
                  "New page", style: new TextStyle(fontSize: 35.0))),
              );   
              });
              if(_curr!=_list.length-1)
                controller.jumpToPage(_curr+1);
                else
                controller.jumpToPage(0);
            },
      child:Icon(Icons.add)),
      FloatingActionButton(
        onPressed: (){
          _list.removeAt(_curr);
          setState(() {
            controller.jumpToPage(_curr-1);
          });
        },
      child:Icon(Icons.delete)),
        ]
      )
    );
  }
}
  
class Pages extends StatelessWidget {
  final text;
  Pages({this.text});
  @override
  Widget build(BuildContext context) {
   return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children:<Widget>[
          Text(text,textAlign: TextAlign.center,style: TextStyle(
            fontSize: 30,fontWeight:FontWeight.bold),),      
        ]
      ),
    );
  }
}

chevron_right


We have set the following parameters in the above example:



scrollDirection: Axis.horizontal,
controller: controller,

Output:

pageview widget with horizontal axis

If the properties are changed as below in the above example:

scrollDirection: Axis.horizontal,
reverse: true,
physics: BouncingScrollPhysics(),
controller: controller,



It will result in the following:

pageview widget with horizontal axis and controller

If the properties are changed as below in the above example:

scrollDirection: Axis.vertical,
physics: BouncingScrollPhysics(),
controller: controller,

It will result in the following:

pageview widget with vertical axis and controller

For the complete code, you can refer to https://github.com/singhteekam/Flutter-PageView-Example




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.


Article Tags :

6


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.