Flutter Question posted in
The official Flutter documentation can be found here.

Flutter Carousel Image Controller

I want to build an onboarding page, which contains three images and different text. So I use Carousel Image but when I want to put carousel controller I got an error, it says "The argument type 'CarouselController' can't be assigned to the parameter type 'CarouselSliderController?'" how can I fix that?

Here is my code:

class OnboardingPage extends StatefulWidget {
  const OnboardingPage({super.key});

  @override
  State<OnboardingPage> createState() => _OnboardingPageState();
}

class _OnboardingPageState extends State<OnboardingPage> {
  int currentIndex = 0;
  CarouselController carouselController = CarouselController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: lightBackgroundColor,
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            CarouselSlider(
              items: [
                Image.asset(
                  'assets/img_onboarding1.png',
                  height: 331,
                ),
                Image.asset(
                  'assets/img_onboarding2.png',
                  height: 331,
                ),
                Image.asset(
                  'assets/img_onboarding3.png',
                  height: 331,
                ),
              ],
              options: CarouselOptions(
                height: 331,
                viewportFraction: 1,
                enableInfiniteScroll: false,
                onPageChanged: (index, reason) {
                  setState(() {
                    currentIndex = index;
                  });
                },
              ),
              carouselController: carouselController,
            ),

and here is the image

Tags:

2

Answers


  1. 0

    The error is clear:

    The argument type 'CarouselController' can't be assigned to the parameter type 'CarouselSliderController?'

    Since in your code, you are using a CarouselSlider:

    CarouselSlider(
        items: [

    You should be passing in a CarouselSliderController.

    But you were passing in a CarouselController — which may be used for a CarouselView.

    So, use a CarouselSliderController with your code:

    
class OnboardingPage extends StatefulWidget {
  const OnboardingPage({super.key});

  @override
  State<OnboardingPage> createState() => _OnboardingPageState();
}

class _OnboardingPageState extends State<OnboardingPage> {
  int currentIndex = 0;
  CarouselSliderController carouselController = CarouselSliderController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: lightBackgroundColor,
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              CarouselSlider(
                items: [
                  Image.asset(
                    'assets/img_onboarding1.png',
                    height: 331,
                  ),
                  Image.asset(
                    'assets/img_onboarding2.png',
                    height: 331,
                  ),
                  Image.asset(
                    'assets/img_onboarding3.png',
                    height: 331,
                  ),
                ],
                options: CarouselOptions(
                  height: 331,
                  viewportFraction: 1,
                  enableInfiniteScroll: false,
                  onPageChanged: (index, reason) {
                    setState(() {
                      currentIndex = index;
                    });
                  },
                ),
                carouselController: carouselController,
              ),
            ],
          ),
        ));
  }
}
    Login or Signup to reply.
  2. 0

    you are using carousel_slider it seems and you are using CarouselController of material.

    try this:

    ...
class _OnboardingPageState extends State<OnboardingPage> {
  int currentIndex = 0;

  // Comment the controller of material package
  //CarouselController carouselController = CarouselController();

  // Add the controller of carousel_slider package
  final CarouselSliderController carouselController =
      CarouselSliderController();

  @override
  Widget build(BuildContext context) {
...
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search