How to show sliver app bar for a future builder body

424 views Asked by At

I have a future builder for the body of the page. The way I implemented the page is a CustomScrollView inside a FutureBuilder. (based on the accepted answer of this question How to use FutureBuilder inside SliverList)

So the entire page, sliver app bar and body (sliver grid) is waiting on the future.

I want the app bar to not wait on the future builder, and always appear, since only the sliver grid depends on the future.

Is that even possible?

final SliverAppBar sliverAppBar = SliverAppBar(
    title: Text('Your offers'),
    floating: true,
  );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: FutureBuilder(
        future: offers,
        builder: (context, AsyncSnapshot<DocumentSnapshot> snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting)
            return SpinKitChasingDots(color: Colors.blueAccent);
          else {
            if (snapshot.hasError)
              return noOffersPage(error: true, errorException: snapshot.error);
            else {
              if (!snapshot.data.exists) return noOffersPage(error: false);
          final Map<String, dynamic> data = snapshot.data.data();
          final List<String> urls = data['urls'];

          return CustomScrollView(
            slivers: [
              sliverAppBar, // <--- unnecessarily waits on the future
              SliverGrid(
                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
                delegate: SliverChildBuilderDelegate(
                  (BuildContext context, int index) {
                    return buildGridItem(urls[index]);
                  },
                  childCount: urls.length,
                ),
              ),
            ],
          );
        }
      }
    },
  ),
);

}

0

There are 0 answers