CarouselSlider nextPage _CastError (Null check operator used on a null value) Error

Question

I'm trying to make a slider with the carousel_slider package. Image:

When I press the button written Next, I want it to go to the next page. I use it as it says in the document, but I get an error.Document

The error I got, It first redirects to a file named carousel_controller.dart , and then gives this error:

_CastError (Null check operator used on a null value)

---

Codes:

import 'package:flutter/material.dart';
import 'package:carousel_slider/carousel_slider.dart';
import 'package:getwidget/getwidget.dart';

final CarouselController _controller = CarouselController();

class selamlasmaLearn extends StatefulWidget {
  @override
  State<selamlasmaLearn> createState() => _selamlasmaLearnState();
}

class _selamlasmaLearnState extends State<selamlasmaLearn> {

  List<wordAndMeaning> wordsList = [
    wordAndMeaning("Hello", "Merhaba", false),
    wordAndMeaning("Go", "Gehen", false)
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.amber,
      body: Builder(builder: (context) {
        final double height = MediaQuery.of(context).size.height - 75;
        return Column(
          children: [
            CarouselSlider(
              options: CarouselOptions(
                height: height,
                viewportFraction: 1.0,
                enlargeCenterPage: false,
              ),
              items: wordsList.map((wordAndMeaning word) {
                return Builder(
                  builder: (BuildContext context) {
                    return Container(
                      width: MediaQuery.of(context).size.width,
                      decoration: BoxDecoration(color: Colors.amber),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          Column(
                            mainAxisSize: MainAxisSize.min,
                            children: [
                              Text(word.word,
                                  style:
                                      TextStyle(fontSize: 45, color: Colors.white)),
                              if (word.showMeaning) ...[
                                Text(word.meaning,
                                    style: TextStyle(
                                        fontSize: 20, color: Colors.white))
                              ]
                            ],
                          ),
                          const SizedBox(
                            width: 10,
                          ),
                          IconButton(
                            icon: Icon(Icons.remove_red_eye_sharp),
                            color: Colors.white,
                            iconSize: 25,
                            onPressed: () {
                              setState(() {
                                word.showMeaning = !word.showMeaning;
                              });
                            },
                          ),
                        ],
                      ),
                    );
                  },
                );
              }).toList(),
            ),
            Column(
              children: [
                GFButton(
                  text: "Next",
                  onPressed: () => _controller.nextPage( // <<<<<<<<<<
                      duration: const Duration(),
                      curve: Curves.easeInCirc),
                )
              ],
            )
          ],
        );
        
      }),
    );
  }
}

class wordAndMeaning {
  String word;
  String meaning;
  bool showMeaning;

  wordAndMeaning(this.word, this.meaning, this.showMeaning);
}

I marked the line that gave the error.

The line causing the error:

              onPressed: () => _controller.nextPage(

How can I solve it? Thanks in advance for the help.

Answer 1

You need to assign your CarouselController to your CarouselSlider

CarouselSlider(
  controller: _controller,
  //...
)

Also, You should define your CarouselController inside your state class

class _selamlasmaLearnState extends State<selamlasmaLearn> {
    final CarouselController _controller = CarouselController();
//...
}

(Friendly Advice: please always name your classes & variables in English and a class should always start with a capital letter)

Answer 2

I faced the same problem. Here is how I fixed it:

1. go to carousel_controller.dart file
2. search for "nextPage" method
3. inside this method, change "isNeedResetTimer" from:

final bool isNeedResetTimer = _state..options;pauseAutoPlayOnManualNavigate;

to:

final bool isNeedResetTimer = true;

This is a carousel slider bug... It can't get the _state.