Hidden Appbar in Flutter

Last Updated : 26 Apr, 2022

Hidden Appbar is the Appbar, when we are scrolling the main body of the Application, the Appbar also scrolled and goes to hidden. There is no need for extra packages of adding, we simply going to use NestedScrollView Widget for the same. A sample video is given below to get an idea about what we are going to do in this article.

Step by Step Implementation

After creating an empty project import the material package that will be used for creating widgets.

Dart

import 'package:flutter/material.dart';

In the main method call the runApp. And in runApp call the class HiddenTopAppBar.

Dart

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

Now we have to create a stateful widget or class that name is MyApp. In MyApp class return the MaterialApp and make the debugbanner to false, In home property call the widget scaffold.

Dart

class HiddenTopAppBarState extends State<HiddenTopAppBar> {
 @override
 initState() {
   super.initState();
 }

 @override
 Widget build(BuildContext context) {
   return MaterialApp(
     debugShowCheckedModeBanner: false,
     home: Scaffold()

Now in the body of the Scaffold, Use the NestedScrollView Widget as shown in the below code example.

Dart

import 'package:flutter/material.dart';

// main function
void main() => runApp(HiddenTopAppBar());

class HiddenTopAppBar extends StatefulWidget {
  @override
  HiddenTopAppBarState createState() => new HiddenTopAppBarState();
}

class HiddenTopAppBarState extends State<HiddenTopAppBar> {

  @override
  initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    // MaterialApp 
    return MaterialApp(  
      debugShowCheckedModeBanner:false,
      // scaffold 
      home:Scaffold(  
      body: NestedScrollView(
        headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
          return [
            SliverAppBar(
              leading:Icon(Icons.wallpaper),
              title: Container(
                color:Colors.blue, 
                child:Text("Hidden AppBar")
              ),
              elevation: 10.0,
              automaticallyImplyLeading: false,
              expandedHeight:50,
              floating: true,
              snap: true,
            )
          ];
        },
        // list of images for scrolling
        body:  ListView(
          children: <Widget>[
            Text("Scroll Down To Hide The AppBar!"),
            Divider(),
            Image.asset("Images/S1.jpg"),
            Divider(),
            Image.asset("Images/S2.jpg"),       
            Divider(),
            Image.asset("Images/S3.jpg"),           
          ],
        ),
      ),
    ),
    );
  }
}

Output:

Explanation

Main Is The Principal Method Used To Run HiddenTopAppBar.
Creating HiddenTopAppBar StatefulWidget Due To Detect Scroll State.
Creating State Class HiddenTopAppBarState That Extends Its Main State From The Main Class HiddenTopAppBar.
Method initState Used To Initialize Page State Once Loaded.
As Flutter Is Based On Widgets a Widget Needed To Be Created
Returning Material App That allows Setting Title And Theme Set To Light By Default And Scaffold -Scaffold Allow Us To Set Body Of the Page.
As We Need To Hide AppBar We Need To Use NestedScrollView Taking headerSliverBuilder That Detect Scrolling And returning SliverAppBar.
Now SliverAppBar Will Auto Hide When users Scroll Down And reappear When User Scroll To The Top.
SliverAppBar Taking Height, Title, And Leading That Show An Icon.
NestedScrollView Take As Body A ListView Taking 3 Images Separated By Divider.

Flutter - Hide the Status Bar

ms471841

Improve

Article Tags :

Dart
Flutter

Hidden Appbar in Flutter

Step by Step Implementation

Explanation

Similar Reads

Thank You!

What kind of Experience do you want to share?