IOS: CarouselController throws Null error on nextPage or jumpToPage

[liam-hp]

CarouselController doesn't seem to be working on IOS (not sure about other platforms).

When I trigger the nextPage or jumpToPage functions, I am met with a Unhandled Exception: Null check operator used on a null value error.

I've recreated a simple example using a map (as per my use case):

ValueNotifier<List<int>> carouselList = useState([1,2,3,4,5]);
CarouselController _controller = CarouselController();

return CarouselSlider(
      carouselController: _controller,
      options: CarouselOptions(
        height: 400.0,
      ),
      items: carouselList.value.asMap().map((index, carouselItem) {
        return MapEntry(index, Builder(
          builder: (BuildContext context) {
            return Container(
              width: 400,
              child: Padding(
                padding: EdgeInsets.fromLTRB(20, 50, 20, 50),
                child: GestureDetector(
                  onLongPress: (){
                    _controller.nextPage(duration: Duration(milliseconds: 300), curve: Curves.linear);
                  },
                  child: Container(
                    color: Colors.grey,
                    child: Text(
                      carouselItem.toString(),
                      style: TextStyle(fontSize: 16.0),
                    )
                  )
                ),
              )
            );
          },
        ));
      }).values.toList(),
    );

I've also copy pasted the example from the docs (added the items component, but the rest is the same), but it also breaks with the same error.

CarouselController _controller = CarouselController();

return Column(
      children: [
        CarouselSlider(
        items: [
          Container(
            width: 500,
            color: Colors.grey,
            child: Text(
              "1",
              style: TextStyle(fontSize: 16.0),
            )
          ),
          Container(
            width: 500,
            color: Colors.grey,
            child: Text(
              "2",
              style: TextStyle(fontSize: 16.0),
            )
          ),
          Container(
            width: 500,
            color: Colors.grey,
            child: Text(
              "3",
              style: TextStyle(fontSize: 16.0),
            )
          ),
        ],
        carouselController: _controller,
        options: CarouselOptions(
          autoPlay: false,
          enlargeCenterPage: true,
          viewportFraction: 0.9,
          aspectRatio: 2.0,
          initialPage: 2,
        ),
        ),
        GestureDetector(
          onTap: () => _controller.nextPage(
              duration: Duration(milliseconds: 300), curve: Curves.linear),
          child: Container(
            height: 50,
            width: 50,
            child: Text('→'),
          ),
        )
      ],
);

[kishan-dhankecha]

You can try carousel_slider_plus. Let me know if the issue persists with this.

[liam-hp]

Updated my stackoverflow post here. The issue has to do with carousel_slider not refreshing on state changes with hooks

[sfx2k]

The trick is to initialize the CarouselSliderController outside the Build method!

[SameerCrestha]

The trick is to initialize the CarouselSliderController outside the Build method!

Nice, it works.