i was trying to add a carousel slider in flutter but i am facing missing required param error

Issue

I was trying to build a carousel slider in a demo flutter app with a bubble bottom bar but in my dart file carousel slider parameters are not defined. I am a beginner so it’s a little difficult to get dart code but I am trying as best I can, please I need help. so, my code is stated below:

// my code (dart)

import 'package:carousel_slider/carousel_slider.dart';

import 'package:flutter/material.dart';

class Dashboard extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(
      children: <Widget>[
        SizedBox(height: 15.0),
        CarouselSlider(
          height: 180.0,
          enlargeCenterPage: true,
          autoPlay: true,
          aspectRatio: 16 / 9,
          autoPlayCurve: Curves.fastOutSlowIn,
          enableInfiniteScroll: true,
          autoPlayAnimationDuration: Duration(milliseconds: 800),
          viewportFraction: 0.8,
          items: [
            Container(
              margin: EdgeInsets.all(5.0),
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(10.0),
                image: DecorationImage(
                  image: AssetImage('assets/netflix/dark1.jpg'),
                  fit: BoxFit.cover,
                ),
              ),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: <Widget>[
                  Text(
                    'Usable Flower for Health',
                    style: TextStyle(
                      color: Colors.white,
                      fontWeight: FontWeight.bold,
                      fontSize: 18.0,
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsets.all(15.0),
                    child: Text(
                      'Lorem Ipsum is simply dummy text use for printing and type script',
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 15.0,
                      ),
                      textAlign: TextAlign.center,
                    ),
                  ),
                ],
              ),
            ),
            Container(
              margin: EdgeInsets.all(5.0),
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(10.0),
                image: DecorationImage(
                  image: AssetImage('assets/netflix/dark2.jpg'),
                  fit: BoxFit.cover,
                ),
              ),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: <Widget>[
                  Text(
                    'Usable Flower for Health',
                    style: TextStyle(
                      color: Colors.white,
                      fontWeight: FontWeight.bold,
                      fontSize: 18.0,
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsets.all(15.0),
                    child: Text(
                      'Lorem Ipsum is simply dummy text use for printing and type script',
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 15.0,
                      ),
                      textAlign: TextAlign.center,
                    ),
                  ),
                ],
              ),
            ),
            Container(
              margin: EdgeInsets.all(5.0),
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(10.0),
                image: DecorationImage(
                  image: AssetImage('assets/netflix/dark3.jpg'),
                  fit: BoxFit.cover,
                ),
              ),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: <Widget>[
                  Text(
                    'Usable Flower for Health',
                    style: TextStyle(
                      color: Colors.white,
                      fontWeight: FontWeight.bold,
                      fontSize: 18.0,
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsets.all(15.0),
                    child: Text(
                      'Lorem Ipsum is simply dummy text use for printing and type script',
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 15.0,
                      ),
                      textAlign: TextAlign.center,
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ],
    );
  }
}

//the error :

lib/dashboard.dart:12:11: Error: No named parameter with the name ‘height’.
height: 180.0,
^^^^^^
/C:/src/flutter/.pub-cache/hosted/pub.dartlang.org/carousel_slider-2.2.1/lib/carousel_slider.dart:34:3: Context: Found this candidate, but the arguments don’t match.
CarouselSlider(
^^^^^^^^^^^^^^

Compiler message:
lib/dashboard.dart:12:11: Error: No named parameter with the name ‘height’.
height: 180.0,
^^^^^^
/C:/src/flutter/.pub-cache/hosted/pub.dartlang.org/carousel_slider-2.2.1/lib/carousel_slider.dart:34:3: Context: Found this candidate, but the arguments don’t match.
CarouselSlider(
^^^^^^^^^^^^^^
Target kernel_snapshot failed: Exception: Errors during snapshot creation: null
build failed.

FAILURE: Build failed with an exception.

  • Where:
    Script ‘C:\src\flutter\packages\flutter_tools\gradle\flutter.gradle’ line: 882

  • What went wrong:
    Execution failed for task ‘:app:compileFlutterBuildDebug’.

Process ‘command ‘C:\src\flutter\bin\flutter.bat” finished with non-zero exit value 1

  • Try:
    Run with –stacktrace option to get the stack trace. Run with –info or –debug option to get more log output. Run with –scan to get full insights.

Solution

There seem to have been breaking changes to this package : All the options are now specified through a CarouselOptions that you pass as the options parameter. So this would be the correct way :

CarouselSlider(
    options: CarouselOptions(
          height: 180.0,
          enlargeCenterPage: true,
          autoPlay: true,
          aspectRatio: 16 / 9,
          autoPlayCurve: Curves.fastOutSlowIn,
          enableInfiniteScroll: true,
          autoPlayAnimationDuration: Duration(milliseconds: 800),
          viewportFraction: 0.8,),
    // the rest of the CarouselSlider declaration

I would also suggest you to develop using either VS Code or Android Studio and their respective Flutter extension. This will help you figure things out (like required parameters).

Answered By – MickaelHrndz

Answer Checked By – Mary Flores (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published. Required fields are marked *