how to hide top appbar in flutter when scrolling

Question

How to hide app bar when we try to scroll up from the body. I have custom app bar and I wanna hide the app bar when I try to scroll from body. I have tried a lot, but could not succeed.

Scaffold(
  appBar: PreferredSize(
      child: ClipPath(
        clipper: CustomAppBar(),
        child: Container(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(
                ' Bike Guru',
                style: GoogleFonts.caveatBrush(
                  fontSize: 40,
                  color: Colors.black,
                  fontWeight: FontWeight.bold,
                ),
              ),
            ],
          ),
        ),
      ),
      preferredSize: Size.fromHeight(kToolbarHeight + 150))

Did you try [SliverAppBar](https://www.youtube.com/watch?v=R9C5KMJKluE) ? — Sukhi, May 04 '20 at 12:13
take a look at [this](https://stackoverflow.com/questions/51948252/hide-appbar-on-scroll-flutter). — hewa jalal, May 04 '20 at 12:35
I tried but the customapp bar won't show only a simple rectangle app bar will be displayed. — Sujal Shrestha, May 04 '20 at 12:54

Kinjal · Accepted Answer · 2020-05-04T14:07:30.107

Try this one it's work for me

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: NestedScrollView(
        headerSliverBuilder: (context, innerBoxIsScrolled) {
          return <Widget>[
            SliverAppBar(
              backgroundColor: Colors.transparent,
              title: Center(
                child: PreferredSize(
                    child: ClipPath(
                      clipper: CustomAppBar(),
                      child: Container(
                        width: MediaQuery.of(context).size.width,
                        height: 60,
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: <Widget>[
                            Text(
                              ' Bike Guru',
                            ),
                          ],
                        ),
                      ),
                    ),
                    preferredSize: Size.fromHeight(kToolbarHeight + 150)),
              ),
              floating: false,
              pinned: false,
            ),
          ];
        },
        body: Center(
          child: Text("Sample Text"), // Actual body content
        ),
      ),
    );
  }

custom appear is not showing rectangle app bar is being displayed.. — Sujal Shrestha, May 04 '20 at 12:48
The result is small custom shape bar in the top left only how to increase the height and width..? — Sujal Shrestha, May 04 '20 at 13:55

how to hide top appbar in flutter when scrolling

1 Answers1