How to I can change state activeDot on slider with provider in flutter

Viewed 52

I am making slider with carousel_slider package in flutter.Already packege is making to change at background. When the photo changes, I want to make this change with the provider. I made to SliderComponent class extends ChangeNotifeier() and I listened my changeActive Dot method. How to I can wrap Consumer that SliderComponent.

My ComponentSlider extend ChangeNotifier class

      return Stack(children: [
      Card(
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(25),
          ),
          child: Container(
            decoration: BoxDecoration(
                color: color!, borderRadius: BorderRadius.circular(10)),
            width: MediaQuery.of(context).size.width,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Column(
                  children: [Text(title!), Text(title!), Text(title!)],
                ),
                Image.asset(
                  imageName!,
                  fit: BoxFit.cover,
                ),
              ],
            ),
          )),
      Positioned(
          left: 20,
          right: 0,
          bottom: 30,
          child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: List.generate(sliderList.length, (idx) {
                return activeIndex == idx ? _activeDot : _inActiveDot;
              })))
    ]);
  }

  **changeActiveDot(index) {
    activeIndex = index;
    notifyListeners();
  }**

  Padding get _activeDot {
    return Padding(
      padding: EdgeInsets.only(right: 8.0),
      child: Container(
        height: 8,
        width: 8,
        decoration:
            BoxDecoration(color: white, borderRadius: BorderRadius.circular(5)),
      ),
    );
  }

  Padding get _inActiveDot {
    return Padding(
      padding: EdgeInsets.only(right: 8.0),
      child: Container(
        height: 8,
        width: 8,
        decoration: BoxDecoration(
            color: darkGray2, borderRadius: BorderRadius.circular(5)),
      ),
    );
  }
}

Where I call SliderComponent

CarouselSlider.builder(itemCount: sliderList.length, options:
            CarouselOptions(
            aspectRatio: 2.0,
            viewportFraction: 1.0,
          ),itemBuilder: (context, index, realIdx) {
            return SliderComponent(color: sliderList[index].color,
            imageName:sliderList[index].imageName,
            title: sliderList[index].title);
        }),
0 Answers
Related