This tutorial is about how to hide AppBar on scroll in flutter. To hide the AppBar on scroll in Flutter using a SliverAppBar, you can follow these steps:
- Wrap the body of your
Scaffoldwith aCustomScrollView. - Add a
SliverAppBarwidget as the first item in thesliverslist of theCustomScrollView. - Set the
floatingproperty of theSliverAppBartotrue. - Set the
snapproperty of theSliverAppBartotrue. - Wrap your main content in a
SliverListwidget. - Add a
NestedScrollViewwidget as the body of yourScaffold.
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: NestedScrollView(
headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
return <Widget>[
SliverAppBar(
title: Text('My App'),
floating: true,
snap: true,
),
];
},
body: CustomScrollView(
slivers: <Widget>[
SliverList(
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return ListTile(
title: Text('Item $index'),
);
},
childCount: 50,
),
),
],
),
),
);
}
}
References:
https://stackoverflow.com/questions/51948252/hide-appbar-on-scroll-flutter?ref=flutterfun.com
Tags: appbar, code, code example, CustomScrollView, example, flutter scrollview, flutter tutorial, flutter tuts, hide, Hide AppBar, how to, NestedScrollView, Scrollbar, SliverAppBar, tutorial, tuts
Related Searches: how to hide appbar, how to hide appbar in flutter on scroll view, hide appbar on scroll view, guide to hide appbar on scroll in flutter
