Open In App

Flutter – Smooth Page Indicator

Improve
Improve
Like Article
Like
Save
Share
Report

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:



Last Updated : 26 Apr, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads