📜 Design Document

Related:

• Enhancement: Add a Tree widget that users slivers and lazy building #31606

Use case

Currently when trying to implement tree UIs (for example: comments section with nested comments - see Instagram's comments for reference) there is no way to do it but to flatten the list and use one SliverList to show the data in the UI.

Proposal

Add a way to add a SliverList inside of a SliverList.
This will allow the CustomListView to scroll with all the data while also perform nicely with all the Slivers benefits.

In my use case, this is critical in SliverAnimatedList.

If you have any other solutions I will be happy to discuss.

Solutions I tried

1. Using a ListView.Builder inside the SliverList builder function with shrinkWrap: true. - Poor Performance
2. As pointed above - Normalizing the nested list with the list.expand function and using this list as the data source. - Poor Developer Experience - because everytime new data arrives we need to manage the flattened list which is not ideal.

Code example

CustomScrollView(
    slivers: [
      SliverList(
        delegate: SliverChildBuilderDelegate(
          (context, index) {
            final data = widget.comments[index];
            return SliverList(
              delegate: SliverChildBuilderDelegate(
                (context, index) {
                  if (index == 0) {
                    return CommentWidget(data);
                  } else {
                    return CommentWidget(
                        data.comments[index - 1],
                        isNested: true);
                  }
                },
                childCount: data.comments.length + 1,
              ),
            );
          },
          childCount: widget.comments.length,
        ),
      ),
    ]
)