Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – What is the difference between SliverList and SliverList.builder

I’m trying to understand the difference between SliverList default constructor and the named SliverList.builder. Both seem to be used for creating scrollable lists within a CustomScrollView, but I’m not sure when to use one over the other. Based on my previous experience with Flutter I assumed that the builder function will create it’s children on demand when they become visible, but I observe the same with SliverChildBuilderDelegate, So I’m confused what exactly is the difference.

CustomScrollView(
    slivers: [
      SliverList.builder(
        itemCount: 50,
        itemBuilder: (context, index) {
          print(index);
            return ListTile(
              leading: const SizedBox.shrink(),
              title: Text(index.toString()),
            );
        },
      ),
    ],
  )

CustomScrollView(
    slivers: [
      SliverList(
        delegate: SliverChildBuilderDelegate(
          (context, index) {
            print(index);
            return ListTile(
              leading: const SizedBox.shrink(),
              title: Text(index.toString()),
            );
          },
          childCount: 50,
        ),
      ),
    ],
  )

In both cases it prints only the visible indexes.

Tags:

2

Answers


  1. 0

    The main difference between SliverList and SliverList.builder in Flutter is:
    Laziness: SliverList.builder is a more "lazy" implementation, where the children are only built when they are needed. This is more efficient for lists with a large or infinite number of children, as it avoids building all the children upfront.
    Itemcount: With SliverList, you need to provide the full itemCount upfront, whereas with SliverList.builder you can provide a nullable itemCount which can improve the accuracy of the scroll metrics if the exact item count is not known.
    Null children: SliverList.builder allows the itemBuilder function to return null, which can be useful in certain scenarios, but requires more careful handling of the scroll metrics.
    Child index mapping: SliverList.builder allows you to provide a findChildIndexCallback function, which can be useful if the order of the children may change at a later time.
    Automatic keep-alives, repaint boundaries, semantic indexes: SliverList.builder allows you to control whether these features are added automatically to the children, whereas SliverList always adds them.
    In summary, SliverList.builder is more suitable for large or infinite lists, where efficiency and flexibility are more important, while SliverList is more suitable for smaller, fixed-size lists where the full item count is known upfront.

    Login or Signup to reply.
  2. 0

    SliverList: Read here

    1. The SliverList widget takes a list of children as its input.
    2. It is suitable when you have a fixed number of children that you want to display in the list, and you can specify them directly in the children parameter of the SliverList.
    3. SliverList is used when you have a fixed number of children that you want to display in the list. You specify the list of children directly as the children parameter of the SliverList widget.

    Example:

    CustomScrollView(
  slivers: <Widget>[
    SliverList(
      delegate: SliverChildListDelegate(
        [
          ListTile(title: Text('Item 1')),
          ListTile(title: Text('Item 2')),
          ListTile(title: Text('Item 3')),
        ],
      ),
    ),
  ],
),

    SliverList.builder: Read here

    1. The SliverList.builder widget takes a delegate parameter, where you provide a SliverChildBuilderDelegate instance.
    2. It is suitable when you have a large or dynamic list of items, such as fetching items from a database or an API.
    3. SliverList.builder is used when you have a large or dynamically changing list of items. It allows you to create the list items on-demand using a builder function.

    Example:

    CustomScrollView(
  slivers: <Widget>[
    SliverList.builder(
      itemCount: 3,
      itemBuilder: (BuildContext context, int index) {
        return ListTile(title: Text('Item $index'));
      },
    ),
  ],
),

    Differences:

    • SliverList takes a list of children directly, while SliverList.builder takes a delegate that builds children dynamically.
    • SliverList.builder is more memory efficient for long or dynamic lists because it only creates and maintains items that are currently visible.
    • SliverList.builder allows you to build lists with a large or dynamic number of items easily, while SliverList is more suitable for fixed lists.
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search