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
Dimas Seto Rizky Goenardi is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
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,
),
],
),
));
}
}