Flutter - Smooth Page Indicator
Last Updated :
26 Apr, 2022
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:
Similar Reads
Flutter - RefreshIndicator Widget The RefreshIndicator widget in Flutter is commonly used to implement pull-to-refresh functionality in a ListView, GridView, or any scrollable widget. In this article, we are going to implement the RefreshIndicator widget and explore some of it. A demo video is given below to get an idea of what we a
3 min read
Flutter - Dots Indicator Dots Indicator can be used to Show an increment or decrement to a value in a Flutter application through the UI. Moreover, it can also be used as an Increment or decrement component for a value through user interaction. To summarize its use case it can be improvised to use for multiple functionaliti
4 min read
Flutter - Using the Inspector Flutter is based on Widgets and Widget Trees. If you are new to Flutter, imagine Widgets as structures of Data or Classes of Data. And to create a flutter application we nest these Widgets within one another. Flutter Inspector Tool Introduction to Flutter Inspector: Just like in Native android we ca
3 min read
Flutter - Loading Progress Indicator Button In this article, we will learn about the Loading Progress Indicator Button in Flutter. What is Loading Progress Indicator Button?Progress Indicator informs customers and users who are using the app about the ongoing Process such as loading an app, submitting a form, or uploading a document online. A
4 min read
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, ScrollP
3 min read