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' ;
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) {
return MaterialApp(
debugShowCheckedModeBanner: false ,
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 ,
)
];
},
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.
Share your thoughts in the comments
Please Login to comment...