Flutter PageView ViewPager + UIScrollView with circular dots tutorial

In this article, We will learn how to implement View Pager or UIScrollView in Flutter using PageView Widget in Flutter.

1. Implementing ViewPager functionality in Flutter using PageView.
2. Adding circular indicator dots with PageView in Flutter.

This article assumes you have basic knowledge of Flutter SDK and Dart.

You should have knowledge of Widgets and Packages in Flutter SDK.

Below will be the output of our code. You can see three circular white dots (indicators) on top of our PageView.

Adding Circle Indicator library

First of all, We need to add circle indicator library dependency in our project pubspec.yaml file.

circle_indicator: ^0.0.7

Now click get packages in your IDE (I am using Android Studio). This will download circle indicator package for your use.

Import Circle Indicator library

Now We have to import this library in our Dart code so we can use it along with PageView Widget.

import 'package:flutter/material.dart';
import 'package:circle_indicator/circle_indicator.dart';

Adding Circular indicator dots above PageView Widget

We will be using Stack Widget. Stack Widget is used to overlap several children.

Our Stack Widget Will have 2 Child Widgets. PageView and CircleIndicator.

Adding Page Controller:

First of all this line of code in your Dart file.

final PageController controller = new PageController();

We will attach this controller with PageView and Circle Indicator.

Adding PageView:

PageView takes Array of Widgets and controller in its constructor.

Currently, I am passing Text Widgets as Children of PageView.

Text widgets are wrapped inside Center Widget because I want Text Widget to be at the center of the screen.

new PageView(
  children: <Widget>[
    new Center(child: new Text("Page One",)),
    new Center(child: new Text("Page Two")),
    new Center(child: new Text("Page Three"))
  ],
  controller: controller,
)

Adding Circle Indicator:

You can also customize Circle Indicator by changing arguments in its constructor.

• First argument is controller class reference.
• The second argument is page size (Total Number of PageView pages).
• The third argument is the radius of Circle Indicator, You can change the size of dots by changing this value.

new CircleIndicator(
    controller, 3, 6.0, Colors.white70, Colors.white
)

Complete Source Code:

class AboutPlaid extends StatelessWidget {

  final PageController controller = new PageController();

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
        home: new Container(
      padding: new EdgeInsets.only(
        top: 16.0,
      ),
      decoration: new BoxDecoration(color: Colors.black),
      child: new Stack(
          alignment: FractionalOffset.topCenter,
          children: <Widget>[
            new PageView(
              children: <Widget>[

       // You can have different Layouts/ Widgets in your app.

                new Center(child: new Text("Page One",)),
                new Center(child: new Text("Page Two")),
                new Center(child: new Text("Page Three"))

              ],
              controller: controller,
            ),
            new Container(
                margin: new EdgeInsets.only(
                  top: 16.0,
                  bottom: 16.0,
                ),
                child: new CircleIndicator(
                    controller, 3, 6.0, Colors.white70, Colors.white)),
          ]),
    ));
  }
}

Currently, I am showing circle indicator dots on top of PageView. If you want to show these dots at the bottom of the page.

Change this line

 alignment: FractionalOffset.topCenter

to

 alignment: FractionalOffset.bottomCenter

Copy Right: http://developine.com/