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());
}
class MysmoothIndicator extends StatefulWidget {
@override
_MysmoothIndicatorState createState() => new _MysmoothIndicatorState();
}
class _MysmoothIndicatorState extends State<MysmoothIndicator> {
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) {
return new MaterialApp(
title: 'SPI Worm' ,
home: new Scaffold(
appBar:AppBar(
title: new Text( 'SPI Worm' )
),
body:
Container(
width: double .infinity,
height:400,
child:
Column(
children: <Widget>[
SizedBox(
height:300,
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
Share your thoughts in the comments
Please Login to comment...