Hide Appbar on scroll in Flutter using Sliver AppBar

how to hide appbar on scrollview in flutter

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:

  1. Wrap the body of your Scaffold with a CustomScrollView.
  2. Add a SliverAppBar widget as the first item in the slivers list of the CustomScrollView.
  3. Set the floating property of the SliverAppBar to true.
  4. Set the snap property of the SliverAppBar to true.
  5. Wrap your main content in a SliverList widget.
  6. Add a NestedScrollView widget as the body of your Scaffold.
class MyApp extends StatelessWidget {
  Widget build(BuildContext context) {
    return Scaffold(
      body: NestedScrollView(
        headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
          return <Widget>[
              title: Text('My App'),
              floating: true,
              snap: true,
        body: CustomScrollView(
          slivers: <Widget>[
              delegate: SliverChildBuilderDelegate(
                (BuildContext context, int index) {
                  return ListTile(
                    title: Text('Item $index'),
                childCount: 50,

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

5/5 (1 vote)
Share to:
Scroll to Top