Flutter: Disappearing SliverAppBar with ListView.builder

Question

I am trying to build a feed of posts (like Instagram) with a disappearing Appbar, when scrolled. Here is my code:

  Widget build(BuildContext context) {
     return Scaffold(
               appBar: AppBar(
                       backgroundColor: Colors.pink[100]         
                       ),
               body: postImagesWidget()
     );
   }

Widget postImagesWidget() {
return
  FutureBuilder(
  future: _future,
  builder: ((context, AsyncSnapshot<List<DocumentSnapshot>> snapshot) {

      return LiquidPullToRefresh(
        onRefresh: _refresh,    // refresh callback

        child: ListView.builder(
                  itemCount: snapshot.data.length,
                  itemBuilder: ((context, index)  =>

                SinglePost(
                  list: snapshot.data,
                  index: index,
                  followingUser: followingUser,
                  currentUser: currentUser,
                  fetch: fetchFeed,
                )))
      );
    }),
);}

As you can see I am using a normal AppBar at the moment and a Listview.builder for creating the posts. I heard about the SliverAppBar and tried to implement it in my setup, but could not get it to work with my ListView.builder.

Any suggestions or ideas on how to remove the AppBar on scroll?

Best regards.

user12816337 · Answer 1 · 2020-02-12T12:15:28.567

FLutter have a widget called SliverAppBar. Does exactly what you want!

Documentation link to SliverAppBar: Flutter Docs - SliverAppBar

Edit

I appologise my thin answer, I was in a busy day ;). Slivers are a different kind of widgets, they just relate with other SliverWidget (this is not a rule) like clique at school haha. Well, bellow I write some code with some comments, you can try in DartPad.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      // Your code starts here
      home: Scaffold(
        // NestedScrollView to hold a Body Widget (your list) and a SliverAppBar. 
        body: NestedScrollView(
          // SingleChildScrollView to not getting overflow warning
            body: SingleChildScrollView(child: Container() /* Your listview goes here */),
            // SliverAppBar goes inside here
            headerSliverBuilder: (context, isOk) {
              return <Widget>[
                SliverAppBar(
                  expandedHeight: 150.0,
                  flexibleSpace: const FlexibleSpaceBar(
                    title: Text('Available seats'),
                  ),
                  actions: <Widget>[
                    IconButton(
                      icon: const Icon(Icons.add_circle),
                      tooltip: 'Add new entry',
                      onPressed: () { /* ... */ },
                    ),
                  ]
                )
              ];
            }),
      ),
    );
  }
}

Flutter: Disappearing SliverAppBar with ListView.builder

1 Answers1

Edit