CarouselView class in Flutter
Last Updated :
01 Jun, 2025
A CarouselView widget in Flutter is an advanced widget that helps developers design a list of widgets where only one item is visible at a time, similar to a carousel. It can be implemented to cycle through images, items, product cards, or content sliders, among others. In this article, more focus is given to the properties and possible ways of using the CarouselView class, as well as the impact that defining specific properties would have on the carousel.
Constructor of CarouselView
The CarouselView constructor allows you to create a material design carousel with several customizable properties:
CarouselView CarouselView({
Key? key,
EdgeInsets? padding,
Color? backgroundColor,
double? elevation,
ShapeBorder? shape,
WidgetStateProperty<Color?>? overlayColor,
bool itemSnapping = false,
double shrinkExtent = 0.0,
CarouselController? controller,
Axis scrollDirection = Axis.horizontal,
bool reverse = false,
void Function(int)? onTap,
bool enableSplash = true,
required double itemExtent,
required List<Widget> children,
})Key Properties
Let's explore some of the essential properties of the CarouselView class.
1. backgroundColor
The backgroundColor property defines the background color for each carousel item. Setting this property changes the appearance of each item in the carousel.
Example:
Dart
Center(
child: SizedBox(
height: 200,
child: CarouselView(
backgroundColor: Colors.blueAccent,
itemExtent: 200,
children: [
Center(child: Text('Item 1')),
Center(child: Text('Item 2')),
Center(child: Text('Item 3')),
],
),
),
),
Output:
Each item in the carousel will have a blue accent background.
2. elevation
The elevation property sets the z-coordinate of each carousel item, giving it a shadow effect.
Example:
Dart
Center(
child: SizedBox(
height: 200,
child: CarouselView(
backgroundColor: Colors.blueAccent,
itemExtent: 200,
elevation: 5.0,
children: [
Center(child: Text('Item 1')),
Center(child: Text('Item 2')),
Center(child: Text('Item 3')),
],
),
),
),
Output:
Each item will appear elevated with a shadow, making it stand out from the background.
3. shape
The shape property allows you to customize the shape of each carousel item using ShapeBorder.
Example:
Dart
Center(
child: SizedBox(
height: 200,
child: CarouselView(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(150),
),
backgroundColor: Colors.blueAccent,
itemExtent: 200,
children: [
Center(child: Text('Item 1')),
Center(child: Text('Item 2')),
Center(child: Text('Item 3')),
],
),
),
),
Output:
Each item in the carousel will have rounded corners, giving it a more refined appearance.
4. padding
The padding property defines the space surrounding each carousel item.
Example:
Dart
Center(
child: SizedBox(
height: 200,
child: CarouselView(
padding: EdgeInsets.all(8.0),
backgroundColor: Colors.blueAccent,
itemExtent: 200,
elevation: 5.0,
children: [
Center(child: Text('Item 1')),
Center(child: Text('Item 2')),
Center(child: Text('Item 3')),
Center(child: Text('Item 4')),
],
),
),
),
Output:
Each item will have padding around it, ensuring that the items are not too close to each other.
5. itemSnapping
The itemSnapping property controls whether the carousel should snap to the next or previous item when scrolling. This is particularly useful when you want the user to focus on one item at a time.
Example:
Dart
Center(
child: SizedBox(
height: 200,
child: CarouselView(
itemSnapping: true,
backgroundColor: Colors.blueAccent,
itemExtent: 200,
children: [
Center(child: Text('Item 1')),
Center(child: Text('Item 2')),
Center(child: Text('Item 3')),
],
),
),
),
Output:
When scrolling, the carousel will automatically snap to the next item, ensuring that each item is centered in the view.
The scrollDirection property allows you to specify the direction in which the carousel scrolls. By default, it scrolls horizontally.
Example:
Dart
Center(
child: SizedBox(
height: 200,
child: CarouselView(
scrollDirection: Axis.vertical,
backgroundColor: Colors.blueAccent,
itemExtent: 200,
children: [
Center(child: Text('Item 1')),
Center(child: Text('Item 2')),
Center(child: Text('Item 3')),
],
),
),
),
Output:
The carousel will scroll vertically instead of horizontally.
7. reverse
The reverse property determines whether the carousel should scroll in the reverse direction.
Example:
Dart
Center(
child: SizedBox(
height: 200,
child: CarouselView(
reverse: true,
backgroundColor: Colors.blueAccent,
itemExtent: 200,
children: [
Center(child: Text('Item 1')),
Center(child: Text('Item 2')),
Center(child: Text('Item 3')),
],
),
),
),
Output:
The carousel will scroll in the opposite direction, starting from the last item.
Code Example: Combining Multiple Properties
Here’s a complete example combining several properties to create a more customized carousel:
Dart
Center(
child: SizedBox(
height: 200,
child: CarouselView(
padding: EdgeInsets.symmetric(horizontal: 16.0),
backgroundColor: Colors.white,
elevation: 4.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
itemSnapping: true,
scrollDirection: Axis.horizontal,
itemExtent: 250,
children: [
Container(
color: Colors.red,
child: Center(child: Text('Item 1')),
),
Container(
color: Colors.green,
child: Center(child: Text('Item 2')),
),
Container(
color: Colors.blue,
child: Center(child: Text('Item 3')),
),
],
),
),
),
Output:
This example creates a horizontally scrolling carousel with rounded corners, padding, elevation, and snapping behavior. Each item will have a different background color, and the carousel will snap to the nearest item as it scrolls.
Conclusion
The CarouselView class in Flutter offers a versatile way to create visually appealing carousels with customizable properties. By adjusting properties like backgroundColor, elevation, shape, and itemSnapping, you can create a carousel that fits the specific needs of your application. The examples provided should give you a good starting point to explore the potential of CarouselView in your Flutter projects.
Similar Reads
Flutter - Carousel Slider Carousel Slider is one of the most popular image sliders used nowadays in most apps. These carousel sliders are mostly seen on various eCommerce sites such as Amazon, Flipkart, Myntra, and many more. Displaying the images in a slider gives an attractive User Experience. As these sliders are automate
4 min read
Flutter - BottomSheet Class Bottom Sheet is one of the popular ways to show various options on the screen. This helps the user to switch to a new screen. You will see this bottom sheet in most of the app to add data or add some information such as address or ticket number. In this article, we are going to see how to implement
7 min read
Container class in Flutter Container class in flutter is a convenience widget that combines common painting, positioning, and sizing of widgets. A Container class can be used to store one or more widgets and position them on the screen according to our convenience. Basically, a container is like a box to store contents. A bas
8 min read
FlipCard in Flutter flip_card is a component that provides a flip card animation. It could be used for hiding and showing details of a product. A sample video is given below to get an idea about what we are going to do in this article. Installing Add the dependency into pubspec.yaml file. dependencies: flip_card: ^0.6
3 min read
ListView Class in Flutter In Flutter, ListView is a scrollable list of widgets arranged linearly. It displays its children sequentially in the scrolling direction, either vertically or horizontally. There are different types of ListViews :ListViewListView.builderListView.separatedListView.customConstructor of ListView Class:
6 min read
Flutter - Build a Circular Slider A CircularSlider is a unique and engaging way to input or visualize values within a circular, radial design. In Flutter, this can be achieved using various packages, such as the sleek_circular_slider package. This package enables us to create a wide range of Circular Sliders and we can create a Circ
4 min read