Flutter: Page View

Published May 24, 2020

In this post we are going to learn about Flutter Pagview Widget.

A PageView is simior to a ViewPager in Android. We can set any number of widgets to a PageView and on swipe left/right on the widgets, the widget will scroll like a page.

PageView has below properties like

Direction

With this property we can set direction scroll of pages.

Reverse

We can also set direction of page.

Page Controller

With this Page Controller we can hanlde the all pages, which need to disply first etc...

Example

import 'package:flutter/material.dart';

void main() {
  runApp(ViewPagerDemo());
}


class ViewPagerDemo extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return ViewPagerState();
  }

}

class ViewPagerState extends State<ViewPagerDemo>{
  var _pageSnapping = true;
  var _horizontalDirection = false;
  var _reverse = true;
  final PageController pageController = PageController(initialPage: 0);
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.pink,
          title: Text("Page View Demo Screen"),
          elevation: 0,

        ),
        body: Column(
          children: [
            Container(
              height: 300.0,
              width: 300.0,
              child: PageView(
                reverse: _reverse,
                controller: pageController,
                scrollDirection: _horizontalDirection ? Axis.horizontal : Axis.vertical,
                pageSnapping: _pageSnapping,
                children: [
                  getPageWidget("Page 1", Colors.pink),
                  getPageWidget("Page 2", Colors.teal),
                  getPageWidget("Page 3", Colors.purple),
                ],
              ),
            ),
            Center(
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  Text("Page Snapping", style: TextStyle(fontWeight: FontWeight.bold),),
                  Checkbox(value: _pageSnapping, onChanged: (pageSnappingValue) {
                    setState(() {
                      _pageSnapping = pageSnappingValue;
                      print("OnChange");
                      print(_pageSnapping);
                    });
                  })
                ],
              ),
            ),
          Center(
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                Text("Horizontal Direction", style: TextStyle(fontWeight: FontWeight.bold),),
                Checkbox(value: _horizontalDirection, onChanged: (direction) {
                  setState(() {
                    _horizontalDirection = direction;
                    print("Direction");
                    print(_horizontalDirection);
                  });
                })
              ],
            ),
          ),
            Center(
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  Text("Reverse", style: TextStyle(fontWeight: FontWeight.bold),),
                  Checkbox(value: _reverse, onChanged: (reverse) {
                    setState(() {
                      _reverse = reverse;
                      print("Reverse");
                      print(_reverse);
                    });
                  })
                ],
              ),
            ),
          ],
        ),
      ),
    );

  }
}
Widget getPageWidget(String text, MaterialColor backgroundColor) {
  return Container(
    color: backgroundColor,
    child: Center(
        child: Text(
          text,
          style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20.0,color: Colors.white),
        )),
  );
}

Output

Article Contributed By :

1890 Views