How to add swiper dots to the image - flutter

Question

I am trying to add swiper dots below as shown in the figure
while in the code I tried parallax effect on image and text, now I am trying to add dots below, swiper dots will help to understand which page we are in.
here is the present code:
import 'package:ecommerce_int2/models/product.dart';
import 'package:flutter/material.dart';
import 'package:transformer_page_view/transformer_page_view.dart';
import 'package:flutter/cupertino.dart';
class ParallaxMain extends StatefulWidget {
ParallaxMain({Key key, this.title}) : super(key: key);
final String title;
#override
_ParallaxMainState createState() => new _ParallaxMainState();
}
class ParallaxSlide extends StatelessWidget {
final List<Product> product;
ParallaxSlide({Key key, this.product}) : super(key: key);
#override
Widget build(BuildContext context) {
return new TransformerPageView(
loop: true,
viewportFraction: 0.8,
transformer: new PageTransformerBuilder(
builder: (Widget child, TransformInfo info) {
return new Padding(
padding: new EdgeInsets.all(10.0),
child: new Material(
elevation: 4.0,
textStyle: new TextStyle(color: Colors.white),
borderRadius: new BorderRadius.circular(10.0),
child: new Stack(
fit: StackFit.expand,
children: <Widget>[
new ParallaxImage.asset(
//images[info.index],
product[info.index].image[0],
position: info.position,
),
new DecoratedBox(
decoration: new BoxDecoration(
gradient: new LinearGradient(
begin: FractionalOffset.bottomCenter,
end: FractionalOffset.topCenter,
colors: [
const Color(0xFF000000),
const Color(0x33FFC0CB),
],
),
),
),
new Positioned(
child: new Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new ParallaxContainer(
child: new Text(
product[info.index].name,
style: new TextStyle(fontSize: 15.0),
),
position: info.position,
translationFactor: 300.0,
),
new SizedBox(
height: 8.0,
),
new ParallaxContainer(
child: new Text("₹ "+product[info.index].price.toString(),
style: new TextStyle(fontSize: 18.0)),
position: info.position,
translationFactor: 200.0,
),
],
),
left: 10.0,
right: 10.0,
bottom: 10.0,
)
],
),
),
);
}),
itemCount: product.length,
);
}
}
class _ParallaxMainState extends State<ParallaxMain> {
#override
Widget build(BuildContext context) {
return new SizedBox(
height: 400,
child: new ParallaxSlide()
);
}
}
Is there any way to add swiper dots to this code?

Answer 1

Try this:
move your TransformerPageView inside a stack and add a DotIndicator
Stack(children:[
TransformerPageView(controller: _controller),
DotsIndicator(controller: _controller)
])
Make sure you add the same _controller for both of them. Then position the dot indicator as you like.
PageController: A controller for PageView.
A page controller lets you manipulate which page is visible in a PageView.
You can read the complete information in the link provided.
Hints taken from here.

Answer 2

Personally, I use smooth_page_indicator because it provides awesome transition effects. Just follow the docs and it's so easy to implement.

Answer 3

Yes we can do it by using carousel_slider
Please check the example of Image carousel slider with a custom indicator.