Most apps display collections. Flutter's ListView and GridView handle scrolling efficiently.
ListView.builder (Efficient)
Dart
ListView.builder(
itemCount: 100,
itemBuilder: (context, index) {
return ListTile(
leading: CircleAvatar(child: Text('${index + 1}')),
title: Text('Item ${index + 1}'),
);
},
)Only builds visible items — essential for large datasets.
GridView
Dart
GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
crossAxisSpacing: 8,
mainAxisSpacing: 8,
),
itemCount: products.length,
itemBuilder: (context, index) {
return Card(child: Center(child: Text(products[index])));
},
)Pull to Refresh
Dart
RefreshIndicator(
onRefresh: () async => await loadData(),
child: ListView.builder(...),
)Tips
- Use
ListView.builderfor lists with more than ~10 items. - Use
shrinkWrap: trueon ListView inside a Column/ScrollView to avoid layout errors.
🎉 You have completed the Flutter course!