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.

[kishan-dhankecha]

This is fixed in the fork here https://pub.dev/packages/carousel_slider_plus. See #f7f6183.

[dharmeshpadhra]

just add null aware operator before calling nextPage method. It worked for me.
await _controller?.nextPage( duration: Duration(milliseconds: 300), curve: Curves.linear);

[18601673727]

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

It worked, but after each hot reloads, the crashes come back

[18601673727]

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

I tried your fork, animateToPage stops working after hot reload

[18601673727]

@sfx2k @kishan-dhankecha

[kishan-dhankecha]

@18601673727 Can you provide a minimal reproducible code snippet? I'll have a look.

[18601673727]

Sure @kishan-dhankecha,

final csController = CarouselSliderController();

@override
Widget build(BuildContext context, WidgetRef ref) {
  final currentSlider = useState(0);

  return Scaffold(
      appBar: AppBar(title: "title"),
      body: Column(
        children: [
          Expanded(
            child: CarouselSlider(
              controller: csController,
              options: CarouselOptions(
                autoPlay: false,
                enlargeCenterPage: false,
                enableInfiniteScroll: false,
                onPageChanged: (index, reason) => currentSlider.value = index,
              ),
              items: [...],
            ),
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              GestureDetector(
                onTap: () => csController.animateToPage(0),
                child: Container(
                  width: 12,
                  height: 12,
                  margin: const EdgeInsets.symmetric(vertical: 18, horizontal: 4),
                  decoration: BoxDecoration(shape: BoxShape.circle, color: Colors.black.withAlpha(currentSlider.value == 0 ? 200 : 100)),
                ),
              ),
              GestureDetector(
                onTap: () => csController.animateToPage(1),
                child: Container(
                  width: 12,
                  height: 12,
                  margin: const EdgeInsets.symmetric(vertical: 18, horizontal: 4),
                  decoration: BoxDecoration(shape: BoxShape.circle, color: Colors.black.withAlpha(currentSlider.value == 1 ? 200 : 100)),
                ),
              ),
            ],
          ),
        ],
      ),
    );
}

[18601673727]

@serenader2014 麻烦大佬帮忙解决一下吧，先行谢过了！

[kishan-dhankecha]

@18601673727 Create a new project, add the code that is enough to generate this issue and share the whole main.dart file here. That way I don't have to manually set upthe whole project, and testing would be easier for me. Thanks.

[18601673727]

Same issue on https://github.com/koji-1009/flutter_carousel_slider, @koji-1009

[koji-1009]

@18601673727
I checked, but the problem could not be reproduced. If further investigation is necessary, please create an issue with the code that reproduces the problem.

app code

import 'package:carousel_slider_x/carousel_slider_x.dart';
import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';

void main() {
  runApp(const MainApp());
}

class MainApp extends StatelessWidget {
  const MainApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: MainView());
  }
}

class MainView extends HookWidget {
  const MainView({super.key});

  @override
  Widget build(BuildContext context) {
    final currentPage = useState(0);
    final controller = useMemoized(() => CarouselControllerX(), const []);
    return Scaffold(
      appBar: AppBar(title: Text('Test')),
      body: SafeArea(
        child: Column(
          children: [
            Expanded(
              child: CarouselSlider(
                carouselController: controller,
                options: CarouselOptions(
                  autoPlay: false,
                  enlargeCenterPage: false,
                  enableInfiniteScroll: false,
                ),
                onPageChanged: (index, reason) {
                  currentPage.value = index;
                },
                items: [
                  ColoredBox(
                    color: Colors.red,
                    child: SizedBox.square(
                      dimension: 300,
                      child: Center(child: Text('1')),
                    ),
                  ),
                  ColoredBox(
                    color: Colors.green,
                    child: SizedBox.square(
                      dimension: 300,
                      child: Center(child: Text('2')),
                    ),
                  ),
                  ColoredBox(
                    color: Colors.blue,
                    child: SizedBox.square(
                      dimension: 300,
                      child: Center(child: Text('3')),
                    ),
                  ),
                ],
              ),
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                TextButton(
                  onPressed: () => controller.previousPage(),
                  child: Text('Previous'),
                ),
                TextButton(
                  onPressed: () => controller.nextPage(),
                  child: Text('Next'),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}