How to hide appBar on default and show it on down scroll – Flutter

January 31, 2024

I am working on a Flutter project and want to implement a functionality where the scrollbar is hidden when the page loads and is only displayed when the user starts scrolling. I have tried a few approaches, but I’m encountering difficulties. Here is my current code:

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:rashi/widgets/spacer.dart';

class Account extends ConsumerWidget {
  const Account({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return Scaffold(
      body: CustomScrollView(
        slivers: <Widget>[
          const SliverAppBar(
            pinned: false,
            snap: true,
            floating: true,
            title: Text('Account'),
          ),
          SliverList(
            delegate: SliverChildBuilderDelegate(
              /// This is test generated list
              (context, index) => ListTile(title: Text('Item #$index')),
              // Builds 1000 ListTiles
              childCount: 100,
            ),
          ),
        ],
      ),
    );
  }
}

If anyone has experience with implementing this type of scrollbar behavior in Flutter, I would greatly appreciate any guidance or solutions you can offer.

This is what I’m expecting:

How I want it to be

>Solution :

Result

You can detect if a user is scrolling using a NotificationListener.

Simply show/hide the appbar based on if the user is scrolling or not.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool isScrolling = false;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material App',
      home: Scaffold(
        body: Scaffold(
          body: NestedScrollView(
            headerSliverBuilder: (context, _) => [
              isScrolling
                  ? SliverAppBar(
                      pinned: true,
                      flexibleSpace: Container(
                        color: Colors.green,
                        child: FlexibleSpaceBar(
                          title: Text(
                            'You are  scrolling',
                            style: TextStyle(color: Colors.black),
                          ),
                        ),
                      ),
                    )
                  : SliverAppBar(),
            ],
            body: NotificationListener<ScrollNotification>(
              onNotification: (scrollNotification) {
                // check if the user is scrolling
                if (scrollNotification is ScrollStartNotification) {
                  setState(() {
                    isScrolling = true;
                  });
                } else if (scrollNotification is ScrollEndNotification) {
                  setState(() {
                    isScrolling = false;
                  });
                }
                return true;
              },
              child: ListView.builder(
                itemCount: 100,
                itemBuilder: (context, index) => ListTile(
                  title: Text('Item $index'),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}