CODEWITHSUNDEEP
fluttercarouselindicatorcarousel-slider
Sir_Catapimba
Sir_Catapimba

Reputation: 91

My dot indicator don't update when slide a image inside a CarouselSlider in Flutter

As you guys read on the title isn't updating somehow. It just does when I do a hot reload and I don't want that. I'm expecting when slide a image to left or right with my finger the dot indicator have to follow. Pls help and thanks in advance. Here is my code of Carousel and the dot indicator:

                                         final urlImages1 = [
                                   'https://i.imgur.com/Y3UejT0.jpg',
                                   'https://i.imgur.com/KNFL3qd.jpg',
                                   'https://i.imgur.com/fxAH9HY.jpg',
                                   'https://i.imgur.com/9GkgdKx.jpg',
                                          ];

                                         int currentIndex = 0; 

                                              child: Column(
                                                children: [
                                                  CarouselSlider.builder(
                                                    itemCount:
                                                        urlImages1.length,
                                                    itemBuilder: (context,
                                                        index, realIndex) {
                                                      final urlImage01 =
                                                          urlImages1[index];
                                                      return buildImage(
                                                          urlImage01,
                                                          index);
                                                    },
                                                    options:
                                                        CarouselOptions(
                                                            height: 300,
                                                            enlargeStrategy:
                                                                CenterPageEnlargeStrategy
                                                                    .height,
                                                            enlargeCenterPage:
                                                                true,
                                                            onPageChanged:
                                                                (index,
                                                                    reason) {
                                                              setState(() {
                                                                currentIndex =
                                                                    index;
                                                              });
                                                            }),
                                                  ),
                                                  SizedBox(
                                                    height: 10,
                                                  ),
                                                  dotIndicator(),
                                                ],
                                              ),



  Widget dotIndicator() => AnimatedSmoothIndicator(
    activeIndex: currentIndex,
    count: urlImages1.length,
    effect: JumpingDotEffect(
        dotHeight: 10,
        dotWidth: 10,
        dotColor: Colors.grey,
        activeDotColor: Colors.green),
  );

Edit: In short the dots under this image do not move when I slide a image. Only with a hot reload.

Upvotes: 3

Views: 3093

Answers (2)

Mayur Devmurari
Mayur Devmurari

Reputation: 64

you just need to change your onPageChanged event of CarouselOptions.

onPageChanged:(index,reason) {
      setState(() {
           currentIndex = index;
      });
}),

to this

onPageChanged:(index,reason) {
      currentIndex = index;
      setState(() {});
}),

change your application state after initialization.

or you can use any other state management method like GET.

Upvotes: 0

X 2
X 2

Reputation: 373

Lets say you created your widget like this.

If you initialize your variables here(inside build method), whenever a state in this widget changes(here the currentIndex) it will call the build method again. Meaning all your variables will be initialized again with the value you assigned to them(currentIndex = 0).

import 'package:flutter/material.dart';

class ExampleWidget extends StatefulWidget {
  @override
  _ExampleWidgetState createState() => _ExampleWidgetState();
}

class _ExampleWidgetState extends State<ExampleWidget> {

  // here is the right place to initialize your variables if you want to preserve their state after a rebuild
  // int currentIndex = 0; 
  // also your urlImages1 list won't change. so, you should also initialize it here
  //     final urlImages1 = [
  //   'https://i.imgur.com/Y3UejT0.jpg',
  //   'https://i.imgur.com/KNFL3qd.jpg',
  //   'https://i.imgur.com/fxAH9HY.jpg',
  //   'https://i.imgur.com/9GkgdKx.jpg',
  // ];

  @override
  Widget build(BuildContext context) {
    // you should remove these two initializations
    final urlImages1 = [
      'https://i.imgur.com/Y3UejT0.jpg',
      'https://i.imgur.com/KNFL3qd.jpg',
      'https://i.imgur.com/fxAH9HY.jpg',
      'https://i.imgur.com/9GkgdKx.jpg',
    ];

    int currentIndex = 0; 

    return Column(
              children: [
                CarouselSlider.builder(
                  itemCount:
                      urlImages1.length,
                  itemBuilder: (context,
                      index, realIndex) {
                    final urlImage01 =
                        urlImages1[index];
                    return buildImage(
                        urlImage01,
                        index);
                  },
                  options:
                      CarouselOptions(
                          height: 300,
                          enlargeStrategy:
                              CenterPageEnlargeStrategy
                                  .height,
                          enlargeCenterPage:
                              true,
                          onPageChanged:
                              (index,
                                  reason) {
                            setState(() {
                              currentIndex =
                                  index;
                            });
                          }),
                ),
                SizedBox(
                  height: 10,
                ),
                dotIndicator(),
              ],
            );
  }
}
Widget dotIndicator() => AnimatedSmoothIndicator(
    activeIndex: currentIndex,
    count: urlImages1.length,
    effect: JumpingDotEffect(
        dotHeight: 10,
        dotWidth: 10,
        dotColor: Colors.grey,
        activeDotColor: Colors.green),
  );;

I hope this is clear. I created the widget just to show you where to put it, it might not work if you copy and paste.

Upvotes: 1

Related Questions