Flutter carousel slider indicator color not changing

Question

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

My code

final List<String> 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<Widget> imageSliders = imgList
    .map((item) => Container(
          child: Container(
            margin: EdgeInsets.all(5.0),
            child: ClipRRect(
                borderRadius: BorderRadius.all(Radius.circular(5.0)),
                child: Stack(
                  children: <Widget>[
                    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() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  int _dotindicatoR = 0;

  String notLength = "0";
  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(),
                    ),
                  ])),
                ),
              ),
            ),
          ),
        ));
  }
}

Like this

What I want to get is when index is same only 1 circle will change color but here all circle are changing

Answer 1

Issue is in dot Row. Where your doing int index = imgList.indexOf(url); its not setting individiual values.

Try Listview.builder like this

SizedBox(
  height: 30,
  child: ListView.builder(
      scrollDirection: Axis.horizontal,
      shrinkWrap: true,
      itemCount: imgList.length,
      itemBuilder: (context, i) {
        return Container(
          width: 8.0,
          height: 8.0,
          margin: EdgeInsets.symmetric(
              vertical: 10.0, horizontal: 2.0),
          decoration: BoxDecoration(
            shape: BoxShape.circle,
            color: _dotindicatoR == i
                ? Color(0xff01a8dd)
                : Color.fromRGBO(0, 0, 0, 0.4),
          ),
        );
      }),
  ),