How to return multiple sliver widgets in Flutter?

Question

I am building a Flutter app using Slivers and Provider.

Widget build(BuildContext context) {
  return CustomScrollView(
    slivers: [
      SliverAppBar(),
      Consumer<CustomerController>(
        builder: (context, model, child) {
          if (model.loading) {
            return Loading();
          }
          else {
            return Header();
            return Saved();
            return Recommendations();
          }
        },
      ),
    ],
  );
}

• Loading returns a SliverFillRemaining
• Header returns a SliverToBoxAdapter
• Saved returns a SliverList
• Recommendations return SliverList

Basically in my app, SliverAppBar is always displayed.

Now depending upon the model's loading state, the rest of the sliver widgets needs to be rendered. But I can only use return once which doesn't render Saved and Recommendation widgets.

How do I solve this problem? How do I return all the sliver widgets specified in the else block?

Answer 1

I have used this handy package - sliver_tools.

And used it like this

Widget build(BuildContext context) {
  return CustomScrollView(
    slivers: [
      SliverAppBar(),
      Consumer<CustomerController>(
        builder: (context, model, child) {
          if (model.loading) {
            return Loading();
          }
          else {
            return MultiSliver(
              children: [
                Header(),
                Saved(),
                Recommendations(),
              ],
            };
          }
        },
      ),
    ],
  );
}