This post provides a step-by-step guide to implementing a carousel slider in Flutter using a custom CarouselView
widget. The code demonstrates how to display a horizontal carousel of images with various customization options.
Demo

Full code Example
import 'package:flutter/material.dart';
List<String> images = [
"https://images.unsplash.com/photo-1503376780353-7e6692767b70",
"https://images.unsplash.com/photo-1577714141096-bf2b9e69500a",
"https://images.unsplash.com/photo-1542362567-b07e54358753",
"https://images.unsplash.com/photo-1511407397940-d57f68e81203",
"https://images.unsplash.com/photo-1659671026913-b7e632f17395"
];
class Home extends StatefulWidget {
const Home({super.key});
@override
State<Home> createState() => _HomeState();
}
class _HomeState extends State<Home> {
CarouselController carouselController = CarouselController();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text(
'CarouselView',
style: TextStyle(
fontWeight: FontWeight.bold,
),
),
),
body: ConstrainedBox(
constraints: const BoxConstraints(maxHeight: 200),
child: CarouselView(
itemExtent: 330,
shrinkExtent: 200,
controller: carouselController,
enableSplash: true,
scrollDirection: Axis.horizontal,
itemSnapping: true,
onTap: (value) {
debugPrint("Tapped index: $value");
},
elevation: 5.0,
padding: const EdgeInsets.all(10.0),
children: List.generate(
images.length,
(index) => Image.network(
images[index],
filterQuality: FilterQuality.high,
fit: BoxFit.cover,
loadingBuilder: (context, child, loadingProgress) {
if (loadingProgress == null) {
return child;
}
// Calculate progress percentage
final totalBytes = loadingProgress.expectedTotalBytes ?? 1;
final loadedBytes = loadingProgress.cumulativeBytesLoaded;
final progress = loadedBytes / totalBytes;
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
CircularProgressIndicator(value: progress),
const SizedBox(height: 10),
Text('${(progress * 100).toStringAsFixed(0)}%'),
],
);
},
errorBuilder: (context, error, stackTrace) {
return const Center(child: Text('Failed to load image'));
},
),
),
),
),
);
}
}
1. List of Images
List<String> images = [
"https://images.unsplash.com/photo-1503376780353-7e6692767b70",
"https://images.unsplash.com/photo-1577714141096-bf2b9e69500a",
"https://images.unsplash.com/photo-1542362567-b07e54358753",
"https://images.unsplash.com/photo-1511407397940-d57f68e81203",
"https://images.unsplash.com/photo-1659671026913-b7e632f17395"
];
This list contains the URLs of car images from Unsplash. These images will be displayed in the carousel.
ConstrainedBox
ConstrainedBox(
constraints: const BoxConstraints(maxHeight: 200),
The ConstrainedBox
limits the maximum height of the carousel to 200 pixels, ensuring it doesn’t take up excessive vertical space.
CarouselView Properties
a. itemExtent
itemExtent: 330,
This property defines the width of each carousel item.
b. shrinkExtent
shrinkExtent: 200,
Specifies the height of each carousel item.
c. controller
controller: carouselController,
The CarouselController
allows programmatic control of the carousel (e.g., to navigate between items).
d. enableSplash
enableSplash: true,
Enables a splash effect when tapping on carousel items.
e. scrollDirection
scrollDirection: Axis.horizontal,
Sets the scrolling direction of the carousel to horizontal.
f. itemSnapping
itemSnapping: true,
Ensures items snap to the center as the user scrolls.
g. onTap
onTap: (value) {
debugPrint("Tapped index: $value");
},
Triggers when an item is tapped, printing the tapped index in the debug console.
h. elevation
elevation: 5.0,
Adds a shadow effect beneath carousel items for a 3D appearance.
i. padding
padding: const EdgeInsets.all(10.0),
Applies padding around each carousel item.
Image.network
a. filterQuality
filterQuality: FilterQuality.high,
Ensures the image is rendered with high quality, especially when scaled.
b. fit
fit: BoxFit.cover,
Scales the image to cover the entire available space while preserving its aspect ratio.
c. loadingBuilder
Displays a CircularProgressIndicator
while the image loads, along with a percentage.
d. errorBuilder
errorBuilder: (context, error, stackTrace) {
return const Center(child: Text('Failed to load image'));
},
Provides a fallback UI in case the image fails to load.
Conclusion
This code demonstrates how to build a customizable and responsive carousel in Flutter. You can tweak properties like itemExtent
, scrollDirection
, or padding
to suit your design requirements. By leveraging the Image.network
widget, the carousel can display high-quality images directly from the web.