CODEWITHSUNDEEP
flutterdart
Sriram
Sriram

Reputation: 3

How to add swiper dots to the image

I am trying to add swiper dots below as shown in the figure

enter image description here

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?

Upvotes: 0

Views: 2182

Answers (3)

Wail Hayaly
Wail Hayaly

Reputation: 1227

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

Upvotes: 1

Anirudh Bagri
Anirudh Bagri

Reputation: 2447

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.

Upvotes: 1

Shailesh Bhokare
Shailesh Bhokare

Reputation: 592

Yes we can do it by using carousel_slider

Please check the example of Image carousel slider with a custom indicator.

Upvotes: 0

Related Questions