Repository navigation
CarouselView.builder: Lazy Loading for CarouselView #170692
Description
Use case
Commonly, widgets like PageView and ListView lazily load items that are not in view. However, CarouselView does not. This can make things like fetching images from the internet or having to do heavy computations to get the widgets feel sluggish and can be taxing on the system if there are a lot of elements in the carousel.
However, it can be easier to use a PageView.builder for some cases, but this method enforces page snapping and additionally, the developer would need to program in the material effects of the CarouselView themselves which can be not trivial.
Description
The current implementation of CarouselView does not have a rigid form of lazy loading process akin to something like ListView.builder which allows for items in the list to load when they are deemed visible by Flutter.
Here is a demonstration of the difference between CarouselView and ListView.builder at handling 30 FutureBuilders.
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(debugShowCheckedModeBanner: false, home: MainApp()));
}
final class MainApp extends StatefulWidget {
const MainApp({super.key});
@override
State<MainApp> createState() => _MainAppState();
}
class _MainAppState extends State<MainApp> {
bool showListView = false;
Axis dir = Axis.vertical;
late List<Future<void>> _carouselFutures;
static const int totalItems = 30;
static const Duration futureDelayMS = Duration(milliseconds: 3500);
@override
void initState() {
super.initState();
_carouselFutures = List<Future<void>>.generate(
totalItems,
(int index) =>
Future<void>.delayed(futureDelayMS, () => print("(CarouselView) $index finished!")),
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
leading: const SizedBox.shrink(),
flexibleSpace: SafeArea(
child: Row(
spacing: 8,
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
ElevatedButton(
onPressed: () => setState(() {
showListView = !showListView;
if (!showListView) {
_carouselFutures = List<Future<void>>.generate(
totalItems,
(int index) => Future<void>.delayed(
futureDelayMS,
() => print("(CarouselView) $index finished!"),
),
);
}
}),
child: Text("Show ${showListView ? "CarouselView" : "ListView"}"),
),
ElevatedButton(
onPressed: () =>
setState(() => dir = dir == Axis.horizontal ? Axis.vertical : Axis.horizontal),
child: Text("Set ${dir == Axis.horizontal ? "Vertical" : "Horizontal"}"),
),
],
),
),
),
body: SafeArea(
left: false,
right: false,
child: Material(
child: Column(
children: <Widget>[
Expanded(
child: !showListView
?
// carousel view here
CarouselView.weighted(
scrollDirection: dir,
flexWeights: const <int>[1, 2, 1],
itemSnapping: true,
shape: Border.all(color: Colors.transparent),
children: List<Widget>.generate(totalItems, (int index) {
return SizedBox(
height: MediaQuery.sizeOf(context).height,
width: MediaQuery.sizeOf(context).width * 0.95,
child: FutureBuilder<void>(
future: _carouselFutures[index],
builder: (BuildContext context, AsyncSnapshot<void> asyncSnapshot) {
if (asyncSnapshot.hasData ||
asyncSnapshot.connectionState == ConnectionState.done) {
return Container(
decoration: BoxDecoration(
color: index % 2 == 0 ? Colors.red : Colors.green,
borderRadius: BorderRadius.circular(30),
),
child: Center(
child: Text(
index.toString(),
textAlign: TextAlign.center,
textWidthBasis: TextWidthBasis.longestLine,
style: const TextStyle(
fontSize: 64,
color: Colors.black,
fontWeight: FontWeight.bold,
),
),
),
);
} else if (asyncSnapshot.hasError) {
return const Text(
"Failed to load!",
style: TextStyle(color: Colors.red),
);
}
return const CircularProgressIndicator(color: Colors.amber);
},
),
);
}),
)
:
// listview method
ListView.builder(
scrollDirection: dir,
itemCount: totalItems,
itemBuilder: (BuildContext context, int index) {
return SizedBox(
height: MediaQuery.sizeOf(context).height,
width: MediaQuery.sizeOf(context).width * 0.95,
child: FutureBuilder<void>(
future: Future<void>.delayed(
futureDelayMS,
() => print("(ListView) $index finished!"),
),
builder: (BuildContext context, AsyncSnapshot<void> asyncSnapshot) {
if (asyncSnapshot.connectionState == ConnectionState.done) {
return Container(
decoration: BoxDecoration(
color: index % 2 == 0 ? Colors.red : Colors.green,
borderRadius: BorderRadius.circular(30),
),
child: Center(
child: Text(
index.toString(),
style: const TextStyle(
fontSize: 64,
color: Colors.black,
fontWeight: FontWeight.bold,
),
),
),
);
} else if (asyncSnapshot.hasError) {
return const Text(
"Failed to load!",
style: TextStyle(color: Colors.red),
);
}
return const CircularProgressIndicator(color: Colors.amber);
},
),
);
},
),
),
],
),
),
),
);
}
}Proposal
Using the code sample from above, it would be better to have some kind of way to build the items on demand with like a CarouselView.builder and CarouselView.buildWeighted that can be supplied a common Widget Function(BuildContext, int) to render the widget at that index.
Activity
exoad commentedon Jun 16, 2025
After looking through the implementation for
CarouselViewit seems like the internal function_buildSliverCarousel():flutter/packages/flutter/lib/src/material/carousel.dart
Lines 465 to 488 in 82b799d
Does provide a way to easily integrate this change as it is using
SliverChildBuilderDelegatealready.However, this is just my first impressions & speculations.
[-]Lazy Loading for `CarouselView`[/-][+]`CarouselView.builder`: Lazy Loading for `CarouselView`[/+]Feat: Add carousel view builder (#172837)
github-actions commentedon Oct 22, 2025
This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of
flutter doctor -vand a minimal reproduction of the issue.Feat: Add carousel view builder (flutter#172837)