how to hide the appbar and make it appear when you scroll in flutter

foreign let's check out how to create a app bar that can be hidden or shown whenever a user Scrolls the screen so you can see over here there is the app bar and there is a list of items so when I scroll down the list of item the app bar gets hidden and when I scroll back up you can see the app bar appears again so let's check this out in our product application and implement the SIM okay so now we are in our Android Studio IDE and here I have created a flutter project by name app bar height so and I have removed the default code and for now I have simply kept a scaffold widget with the empty container okay so let's get started by creating a app bar that can be hidden or shown when a user Scrolls the screen to achieve the same we can make use of a widget called as nested scroll view by which we can create a silver app bar that can be hidden or shown whenever a user Scrolls the screen okay so now let's start the implementation so in scaffold widget I have a container so here I will just remove the container and instead of that I will make use of a nested scroll View and inside nested scroll wheel I must make use of a property called as header silver Builder and inside this I need to pass two parameter as a function that is build context and a Boolean property and this header silver Builder will return us as silver app bar so let's do that return silver app bar and inside the silver app bar I will give a simple title as a text and let's name it as a bar for now okay and here it is been showing a warning that is we must make use of a body property of this nested scroll view so let's import it and here what I will do is insert body property I will create a list of item by making use of list view Builder foreign or restart our app and check out how our app looks okay so app has been running so whenever I scroll down so you can see app is getting hidden and when I scroll up it is getting shown so you can see I am just scrolling up to 50 item and when I scroll up there is no app bar been shown immediately so to achieve this inside this silver app bar that is a property called as floating and here we must make it as true and now let's check if it works okay so I will just scroll down and scroll up so it is not working that's because in this nested scroll view there is a one more property called as float silver and here we must make it true okay so now let's hot refresh and check so I'm just scrolling down and you can see when I scroll up the app bar gets appear again so now it has been hidden and it is up appearing again okay so let's make this title at the center of my screen okay and now you can see there is no animation whenever the app bar is been hit height going into hidden state so to achieve that there is a property that is snap and we must just make it true okay so this snap only works when you are making use of this floating property and if there is if you do not use this then you may get an error okay so let me check so you can see there is a site animation been shown whenever the app is going into a hidden state okay so this was a small short video tutorial on how to hide also a app bar in flutter so thanks for watching please subscribe protocol as Point thank you

Channel: Proto Coders Point

Views: 4,927

Keywords: flutter appbar hide, nestedScrollView, flutter hide and show appbar, flutter sliverappbar, appbar, Flutter Appbar Hide and Show, SliverAppBar, flutter appbar hide on scroll, how to hide the appbar and make it appear when you scroll in flutter, hide appbar on scroll flutter, flutter hide appbar, flutter appbar hide and show

Id: z7O2RWr6FQs

Length: 4min 20sec (260 seconds)

Published: Fri Dec 02 2022