ListView Widget and Attributes

ListView Widget and Attributes

ยท

2 min read

In Flutter, the ListView widget is used to create a scrollable, linear list of widgets. It's a commonly used widget for displaying a list of items in a vertical or horizontal direction. The ListView widget can be customized with various attributes to control its behavior and appearance.

Now, let's go through some key properties and attributes of the ListView widget in this example:

  1. children (List<Widget>):

    • Specifies the list of widgets to be displayed in the ListView.
  2. scrollDirection (Axis, default: Axis.vertical):

    • Determines the scroll direction of the list, either vertical or horizontal.
  3. shrinkWrap (bool, default: false):

    • Specifies whether the ListView should shrink-wrap its content or take up all available space.
  4. padding (EdgeInsets):

    • Adds padding around the entire ListView.
  5. itemExtent (double):

    • Forces the children of the ListView to have a specific extent (height for vertical, width for horizontal).
  6. physics (ScrollPhysics):

    • Defines the physics of the scrolling behavior, such as bouncing or clamping.
  7. controller (ScrollController):

    • Provides a controller for interacting with the scroll position and controlling the ListView programmatically.
  8. separatorBuilder (IndexedWidgetBuilder):

    • Defines a separator between consecutive list items.
  9. cacheExtent (double):

    • Sets the maximum distance in pixels outside the ListView that the framework should cache.
  10. addAutomaticKeepAlives (bool):

    • Enables automatic management of keeping items alive when they are scrolled out of view.

Here's an example of a basic ListView with some common properties:

    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 Example'),
          ),
          body: ListView(
            // Example 1: Basic List of Text Widgets
            children: <Widget>[
              ListTile(
                leading: Icon(Icons.star),
                title: Text('Item 1'),
                subtitle: Text('Subtitle for Item 1'),
                onTap: () {
                  // Handle item tap
                },
              ),
              ListTile(
                leading: Icon(Icons.star),
                title: Text('Item 2'),
                subtitle: Text('Subtitle for Item 2'),
                onTap: () {
                  // Handle item tap
                },
              ),
              // ... add more list items as needed
            ],

            // Example 2: List Builder for Dynamic Content
            // children: List.generate(
            //   10,
            //   (index) => ListTile(
            //     title: Text('Item $index'),
            //   ),
            // ),
          ),
        );
      }
    }

Did you find this article valuable?

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

ย