ListView Builder Widget and Attributes

ListView Builder Widget and Attributes

ยท

2 min read

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:

  1. 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.
  2. itemCount (int):

    • The number of items in the list. This can be a fixed number or dynamically determined.
  3. scrollDirection (Axis, default: Axis.vertical):

    • Determines the scroll direction of the list, either vertical or horizontal.
  4. controller (ScrollController):

    • Provides a controller for interacting with the scroll position and controlling the ListView.builder programmatically.
  5. physics (ScrollPhysics):

    • Defines the physics of the scrolling behavior, such as bouncing or clamping.
  6. padding (EdgeInsets):

    • Adds padding around the entire ListView.builder.
  7. shrinkWrap (bool):

    • Specifies whether the ListView.builder should shrink-wrap its content or take up all available space.
  8. addAutomaticKeepAlives (bool):

    • Enables automatic management of keeping items alive when they are scrolled out of view.
  9. cacheExtent (double):

    • Sets the maximum distance in pixels outside the ListView.builder that the framework should cache.
  10. 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.

Did you find this article valuable?

Support Vinit Mepani (Flutter Developer) by becoming a sponsor. Any amount is appreciated!

ย