Hidden Appbar in Flutter
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.