Flutter – Smooth Page Indicator

Smooth Page Indicator is a customizable animated page indicator with the following set of built-in effects.

• Worm
• Expanding Dots
• Scrolling Dots
• Jumping Dots
• Slide
• Scale
• Swap

Getting Start

First, we need to add dependency into the pubspec.yaml file.

dependencies:
 smooth_page_indicator: ^1.0.0+2

Don’t forget to get packages.

Note: The version of the packages may change at the time you read.

Import it

When we use it we need to Import the package.

Dart

import 'package:smooth_page_indicator/smooth_page_indicator.dart';

Getting Into the code

Now in void main( ) function call the runApp( ) method and call the class MysmoothIndicator( ). Defining variable controller of the type Controller used to control the active page (Knowing which page is selected after each swipe)

Dart

var controller;
controller =PageController(
  viewPortFraction: 0.8,
 );

The viewportFraction determines each child to fill in the main axis, Here 80%. Now our Class looks like Till now,

Dart

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

void main() {
  runApp(MysmoothIndicator());
}  // main function

class MysmoothIndicator extends StatefulWidget {
  @override
  _MysmoothIndicatorState createState() => new _MysmoothIndicatorState();
}

class _MysmoothIndicatorState extends State<MysmoothIndicator> {
  // variable controller
  var controller;
 @override
  void initState() {
      controller=new PageController(
      viewportFraction:0.8,
    );
    super.initState();
}

Now make a list of pages to swipe. so that at each swipe we show the effects.

Dart

@override
 Widget build(BuildContext context) {
   // materialApp
   return new MaterialApp(
     title: 'SPI Worm',
     // scaffold
     home: new Scaffold(
       appBar:AppBar(
           title: new Text('SPI Worm')
       ),
       body:
       Container(
         width:double.infinity,
         height:400,
         child:
         Column(
           children: <Widget>[
             SizedBox(
               height:300,
               // pageview
               child:new PageView(
                 controller:controller,
                 children: <Widget>[
                   SizedBox(
                   width:double.infinity,
                   height:300,
                   child:
                    Card(
                     color:Colors.yellow,
                     child:
                     Center(
                      child:
                       Text('Simple Text,Keep Swiping'),
                     ),
                   ),
                  ),

                   SizedBox(
                     width:double.infinity,
                     height:300,
                     child:
                     Card(
                       color:Colors.white70,
                       child:
                       Center(
                         child:
                          Icon(Icons.favorite),
                       ),
                     ),
                   ),

                   SizedBox(
                     width:double.infinity,
                     height:300,
                     child:
                     Card(
                       color:Colors.black26,
                       child:
                       Center(
                         child:
                          Column(
                            mainAxisAlignment:MainAxisAlignment.center,
                            crossAxisAlignment:CrossAxisAlignment.center,
                            children: <Widget>[
                              Image.asset("Images/Dart_Logo.png"),
                              Text("Dart Logo!")
                            ],
                          )
                       ),
                     ),
                   ),
                 ],
               ),
             ),
           ],
         )
       ),
     ),
   );
 }
}

Output till now: 

Now we have to create an Indicator for different effects,

Worm Effects 

In the pageView widget, Use the Flexible widget and use smoothPageIndicator as a child, and take wormEffect() as a child of effect property.

Dart

Flexible(
         child:
           SmoothPageIndicator(
                controller:controller,
                count:3,
                effect:WormEffect(),
        ),
)

Output:

Jumping Dots Effects

In effect property  of SmoothPageIndicator give JumpingDotEffect().

Dart

Container(
          child:
            SmoothPageIndicator(
                  controller:controller,
                  count:3,
                  effect:JumpingDotEffect(),
         ),
)

Output:

ScrollDotsEffets

In effect property  of SmoothPageIndicator give ScrollDotEffect().

Dart

Container(
          child:
            SmoothPageIndicator(
                  controller:controller,
                  count:3,
                  effect:ScrollDotEffect(  activeStrokeWidth : 2.6,
                  activeDotScale : 0.4,
                  radius : 8,
                  spacing : 10,),
         ),
)

Output:

Scale Effect

In effect property  of SmoothPageIndicator give ScaleEffect().

Dart

Container(
          child:
            SmoothPageIndicator(
                  controller:controller,
                  count:3,
                  effect:ScaleEffect(),
        ),
)

Output:

Slider Effect 

In effect property  of SmoothPageIndicator give SlideEffect().

Dart

Container(
         child:
            SmoothPageIndicator(
                  controller:controller,
                  count:3,
                  effect:SlideEffect(
                  spacing : 8,
                  radius : 4,
                  dotWidth : 24,
                  dotHeight : 16,
                  activeColor : Colors.indigo,
            ),
     ),
)

Output: