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.
FLutter have a widget called SliverAppBar. Does exactly what you want!
Documentation link to SliverAppBar: Flutter Docs - SliverAppBar
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: () { /* ... */ },
),
]
)
];
}),
),
);
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.