SliverList inside ExpansionTile without Shrinkwrap (Flutter)

Viewed 355

Is there any way to build a SliverList inside ExpansionTile? The reason I want to do this, I have a really large amount of data that needs to be put inside the expansion tile. Expansion tile needs List but SliverList should be inside CustomScrollView. If I use custom Scroll View inside Expansion tile's Children and put SliverList in it renders nothing. If I set Shrinkwrap true to CustomScrollView it renders Every Widget at a time. So, How can it be fixed?

Here is an example,

class Expamle extends StatelessWidget {
  const Expamle({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return CustomScrollView(
      slivers: [
        ....,
        SliverList(
          delegate: SliverChildBuilderDelegate(
            (_, i) => ExpansionTile(
              title: const Text('Title'),
              children: [
                // But it is Illegal here
                SliverList(
                  delegate: SliverChildBuilderDelegate(
                    (_, i) => const Text('Child'),
                    childCount: 10,
                  ),
                ),
                // It does not render anything
                CustomScrollView(
                  slivers: [
                    SliverList(
                      delegate: SliverChildBuilderDelegate(
                        (_, i) => const Text('Child'),
                        childCount: 10,
                      ),
                    ),
                  ],
                ),
                // It Works but render all widgets at a time
                CustomScrollView(
                  shrinkWrap: true,
                  slivers: [
                    SliverList(
                      delegate: SliverChildBuilderDelegate(
                        (_, i) => const Text('Child'),
                        childCount: 10,
                      ),
                    ),
                  ],
                ),
              ],
            ),
          ),
        ),
      ],
    );
  }
}
2 Answers

Definitely not a proper solution but just a rought workaround. I need the same functionality and it seems it can't be achieved with Flutter currently. So I ended up changing the design a bit. Instead of having a full list of data in your expansion tile, you can just show a preview of some small number of items which can be rendered at once safely. Then, at the end of this short list, add a "Show all (number)" button which will show the full data in a separate screen or dialog.

You can use this package to achieve what you want: https://pub.dev/packages/expandable_sliver_list

I've had some success with it. But it is not highly customisable. The animation speed is way too slow making it rather laggy feeling. You can potentially just fork or change the code locally to fix this.

However, once the lists expand, they are truly within a sliver. I can feel a massive improvement when the list gets very long. No jitters.

Related