Creating a CarouselView in Flutter

By | January 22, 2025

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.

Leave a Reply

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