What is the ListView widget in Flutter?

• General

In Flutter, a ListView is a scrollable list of widgets that are arranged linearly. Also, It is the most commonly used scrolling widget. So, in this article, we will see what is the ListView widget in Flutter.

What is the ListView widget in Flutter?

To clarify, ListView is a scrollable list of widgets that are arranged linearly. Moreover, it displays its children one after another in the scroll direction. So, below are the few properties of ListView:

• childrenDelegate: This property takes SliverChildDelegate as the object. And it serves as a delegate that provided the children with the ListView.
• clipBehaviour: This property holds Clip enum (final) as the object. It controls whether the content in the ListVew will be clipped or not.
• itemExtent: The itemExtent takes in a double value as the object to controls the scrollable area in the ListView.
• padding: It holds EdgeInsetsGeometryI as the object to give space between the Listview and its children.
• scrollDirection: This property takes in Axis enum as the object to decide the direction of the scroll on the ListView.
• shrinkWrap: This property takes in a boolean value as the object. So, It will decide whether the size of the scrollable area will be determined by the contents inside the ListView.

So, Let’s have a look at the different types of ListViews. Also, we will explore each type one by one. The different types of ListView are:

ListView()

So, this is the default constructor of the ListView class. As a result ListView simply takes a list of widgets and makes it scrollable. This is because the List will also construct invisible elements in the list. So numerous widgets may render this inefficiently.

ListView(
  padding: EdgeInsets.all(20),
  children: <Widget>[
    CircleAvatar(
      maxRadius: 50,
      backgroundColor: Colors.black,
      child: Icon(Icons.person, color: Colors.white, size: 50),
    ),
    Center(
      child: Text(
        'Implement the ListView',
        style: TextStyle(
          fontSize: 50,
        ),
      ),
    ),
    Text(
      "This is the code for ListView.",
      style: TextStyle(
        fontSize: 20,
      ),
    ),
  ],
),

ListView.builder()

So, the builder() constructor constructs a repeating list of items. Also, The constructor takes two main parameters. The first is itemCount for the number of items in the list. And the second one is itemBuilder for constructed each list item. In addition, the list items are constructed lazily. To clarify, only a certain number of items in the list have been compiled. Also, when the user scrolls forward, the previous ones will be destroyed. But if the itemCount is not specified, infinite widgets will be constructed by default.

ListView.builder(
  itemCount: 20,
  itemBuilder: (context, position) {
    return Card(
      child: Padding(
        padding: const EdgeInsets.all(20.0),
        child: Text(
          position.toString(),
          style: TextStyle(fontSize: 22.0),
        ),
      ),
    );
  },
),

ListView.separated()

So, to generate a list of widgets you can use ListView.separated() . In addition, you can also generate a separate widget to separate the widgets. In short, these are two interlocking widget lists: the main list and the separator list. Unlike the builder() constructor, the itemCount parameter is compulsory here. Also, you can’t use infinite count here

ListView.separated(
  itemBuilder: (context, position) {
    return Card(
      child: Padding(
        padding: const EdgeInsets.all(15.0),
        child: Text(
          'List Item $position',
        ),
      ),
    );
  },
  separatorBuilder: (context, position) {
    return Card(
      color: Colors.grey,
      child: Padding(
        padding: const EdgeInsets.all(5.0),
        child: Text(
          'Separator $position',
          style: TextStyle(color: Colors.white),
        ),
      ),
    );
  },
  itemCount: 20,
),

ListView.custom()

So, the ListView.custom() lets the developers build ListViews with custom functionality. In addition, it decides how to construct the children of the list. However, the main parameter required for this operation is SliverChildDelegate, because it is used to construct the element. Further, there are mainly two types of SliverChildDelegates that are:

1. SliverChildListDelegate: It accepts a direct list of children’s widgets. Moreover, the ListView default constructor behaves like a ListView.custom with a SliverChildListDelegate.
2. SliverChildBuilderDelegate: It accepts an IndexedWidgetBuilder (The builder function we use). Moreover, the ListView.builder is essentially a ListView.custom with a SliverChildBuilderDelegate.

Conclusion

Thanks for being with us on a Flutter Journey!

So, in this article, we have been through what is the ListView widget in Flutter. Also, feel free to comment and provide your valuable suggestion.

Flutter Agency is our portal Platform dedicated to Flutter Technology and Flutter Developers. Above all, the portal is full of cool resources from Flutter like Flutter Widget Guide, Flutter Projects, Code libs and etc.

Flutter Agency is one of the most popular online portals dedicated to Flutter Technology. Also, Daily thousands of unique visitors come to this portal to enhance their knowledge of Flutter.

Written by Nirali Patel

Nirali Patel is a dedicated Flutter developer with over two years of experience, specializing in creating seamless mobile applications using Dart. With a passion for crafting user-centric solutions, Nirali combines technical proficiency with innovative thinking to push the boundaries of mobile app development.