title: Flutter carousel slider indicator color not changing
body: <p>I have a simple carousel slider in which there are indicator dots. Issue is my dot color changing all together. Mean when _dotindicatoR comes to 0 all circle going to blue and when it change to 1, 2, or 3 its going to grey. Mean all changing color together</p>
  <p>My code</p>
  <pre><code>final List&lt;String&gt; imgList = [
    'images/diana-polekhina-F68HtpYHu_w-unsplash.jpg',
    'images/diana-polekhina-F68HtpYHu_w-unsplash.jpg',
    'images/diana-polekhina-F68HtpYHu_w-unsplash.jpg',
    'images/diana-polekhina-F68HtpYHu_w-unsplash.jpg',
  ];
  
  final List&lt;Widget&gt; imageSliders = imgList
      .map((item) =&gt; Container(
            child: Container(
              margin: EdgeInsets.all(5.0),
              child: ClipRRect(
                  borderRadius: BorderRadius.all(Radius.circular(5.0)),
                  child: Stack(
                    children: &lt;Widget&gt;[
                      Image.asset(
                        item,
                        fit: BoxFit.cover,
                      ),
                      Positioned(
                        bottom: 0.0,
                        left: 0.0,
                        right: 0.0,
                        child: Container(
                          decoration: BoxDecoration(
                            gradient: LinearGradient(
                              colors: [Colors.red, Colors.blue],
                              begin: Alignment.bottomCenter,
                              end: Alignment.topCenter,
                            ),
                          ),
                        ),
                      ),
                    ],
                  )),
            ),
          ))
      .toList();
  
  class HomeScreen extends StatefulWidget {
    @override
    _HomeScreenState createState() =&gt; _HomeScreenState();
  }
  
  class _HomeScreenState extends State&lt;HomeScreen&gt; {
    int _dotindicatoR = 0;
  
    String notLength = &quot;0&quot;;
    Timer timer;
  
    @override
    void initState() {
      super.initState();
    }
  
    @override
    void dispose() {
      timer?.cancel();
      super.dispose();
    }
  
    double xOffset = 0;
    double yOffset = 0;
    int pageIndex = 0;
  
    double scaleFactor = 1;
    var rating = 3.0;
  
    bool isDrawerOpen = false;
  
    @override
    Widget build(BuildContext context) {
      double width = MediaQuery.of(context).size.width;
      double height = MediaQuery.of(context).size.height;
      print(width);
  
      return AnimatedContainer(
          transform: Matrix4.translationValues(xOffset, yOffset, 0)
            ..scale(scaleFactor)
            ..rotateY(isDrawerOpen ? -0.5 : 0),
          duration: Duration(milliseconds: 370),
          decoration: BoxDecoration(
              color: Colors.grey[200],
              borderRadius: BorderRadius.circular(isDrawerOpen ? 40 : 0.0)),
          child: GestureDetector(
            onTap: () {
              isDrawerOpen
                  ? setState(() {
                      xOffset = 0;
                      yOffset = 0;
                      scaleFactor = 1;
                      isDrawerOpen = false;
                    })
                  : print('sada');
            },
            child: Container(
              child: ClipRRect(
                borderRadius: isDrawerOpen
                    ? BorderRadius.circular(40.0)
                    : BorderRadius.circular(0),
                child: Scaffold(
                  backgroundColor: Colors.white,
                  body: SingleChildScrollView(
                    child: Container(
                        child: Column(children: [
                      CarouselSlider(
                        options: CarouselOptions(
                            autoPlay: true,
                            aspectRatio: 1.85,
                            enlargeCenterPage: true,
                            enlargeStrategy: CenterPageEnlargeStrategy.height,
                            onPageChanged: (index, reason) {
                              print('index ${index}');
                              setState(() {
                                _dotindicatoR = index;
                                print('_current ${_dotindicatoR}');
                              });
                            }),
                        items: imageSliders,
                      ),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: imgList.map((url) {
                          int index = imgList.indexOf(url);
                          return Container(
                            width: 8.0,
                            height: 8.0,
                            margin: EdgeInsets.symmetric(
                                vertical: 10.0, horizontal: 2.0),
                            decoration: BoxDecoration(
                              shape: BoxShape.circle,
                              color: _dotindicatoR == index
                                  ? Color(0xff01a8dd)
                                  : Color.fromRGBO(0, 0, 0, 0.4),
                            ),
                          );
                        }).toList(),
                      ),
                    ])),
                  ),
                ),
              ),
            ),
          ));
    }
  }
  </code></pre>
  <p>Like this</p>
  <p><a href="https://i.stack.imgur.com/mDHom.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mDHom.png" alt="enter image description here" /></a></p>
  <p><a href="https://i.stack.imgur.com/fMtKf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fMtKf.png" alt="enter image description here" /></a></p>
  <p>What I want to get is when index is same only 1 circle will change color but here all circle are changing</p>