ListView Builder Widget and Attributes


The ListView.builder widget in Flutter is used when you have a dynamic list of items and you want to create the list items on-demand as the user scrolls. It is particularly useful when dealing with a large or infinite list of items, as it only creates the widgets that are currently visible on the screen, optimizing performance.
Attributes and Properties:
itemBuilder (IndexedWidgetBuilder):
- A callback function that takes an index and returns the widget for that index. It is called only for the indices that are currently in view.
itemCount (int):
- The number of items in the list. This can be a fixed number or dynamically determined.
scrollDirection (Axis, default: Axis.vertical):
- Determines the scroll direction of the list, either vertical or horizontal.
controller (ScrollController):
- Provides a controller for interacting with the scroll position and controlling the ListView.builder programmatically.
physics (ScrollPhysics):
- Defines the physics of the scrolling behavior, such as bouncing or clamping.
padding (EdgeInsets):
- Adds padding around the entire ListView.builder.
shrinkWrap (bool):
- Specifies whether the ListView.builder should shrink-wrap its content or take up all available space.
addAutomaticKeepAlives (bool):
- Enables automatic management of keeping items alive when they are scrolled out of view.
cacheExtent (double):
- Sets the maximum distance in pixels outside the ListView.builder that the framework should cache.
semanticChildCount (int):
- The number of semantic nodes in the list. This is used for accessibility purposes.
Example:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('ListView.builder Example'),
),
body: ListView.builder(
itemCount: 100, // Example: A list with 100 items
itemBuilder: (BuildContext context, int index) {
return ListTile(
title: Text('Item $index'),
subtitle: Text('Subtitle for Item $index'),
leading: Icon(Icons.star),
trailing: Icon(Icons.arrow_forward),
onTap: () {
// Handle item tap
},
);
},
),
);
}
}
In this example, the ListView.builder is used to create a scrollable list with 100 items. The itemBuilder callback function is responsible for creating individual list items based on the current index. Adjust the properties and customize the itemBuilder function according to your specific needs.
Subscribe to my newsletter
Read articles from Vinit Mepani directly inside your inbox. Subscribe to the newsletter, and don't miss out.
Written by

Vinit Mepani
Vinit Mepani
"Hello World, I'm Vinit Mepani, a coding virtuoso driven by passion, fueled by curiosity, and always poised to conquer challenges. Picture me as a digital explorer, navigating through the vast realms of code, forever in pursuit of innovation. In the enchanting kingdom of algorithms and syntax, I wield my keyboard as a magical wand, casting spells of logic and crafting solutions to digital enigmas. With each line of code, I embark on an odyssey of learning, embracing the ever-evolving landscape of technology. Eager to decode the secrets of the programming universe, I see challenges not as obstacles but as thrilling quests, opportunities to push boundaries and uncover new dimensions in the realm of possibilities. In this symphony of zeros and ones, I am Vinit Mepani, a coder by passion, an adventurer in the digital wilderness, and a seeker of knowledge in the enchanting world of code. Join me on this quest, and let's create digital wonders together!"