Flutter Tutorial - Hide/Show AppBar & FAB On Scroll | Collapse Toolbar & Floating Action Button

how to hide or show the app bar as well as the floating action button on scrolling in flutter if you're new here subscribe to my channel and make sure to watch this video till the end let's start by making the app bar disappearing on scrolling to make your app bar scrollable simply wrap it inside of the nested scrollview widget inside the header sliver builder also make sure that you replace the app bar by a sliver appbar and the sliver appbar has the same properties as the app bar also has and that's it if i now scroll here up then the app bar disappears and if i scroll down then the app bar appears again right now if you scroll the app bar then you can control here every single pixel and we want to change it therefore make your sliver app bar snappable by setting these both flags to true and within your nested scroll view you want to set also the float header slivers to true make sure to click on hot restart and with this our app bar is now always completely hidden or completely visible and we have here the snapping animation next we want to hide the floating action button on scrolling down simply add a boolean flag which determines if your floating action button is visible and if this flag is set to true then we want to show here our floating action button otherwise we want to hide our floating action button and here we return null and with this if we set this boolean flag to false and then hot reload then this floating action disappears and if we set it to true then it appears again and we also have here this cool built-in animation already importantly don't use here the visibility or opacity widget to show and hide your floating action button because if you use here the visibility widget and then you change here the flag from true to false then you have your not this built-in animation which we have with the ternary operator next we want to hide and show the floating action button on scrolling up and down in the list view therefore we want to put first of all this boolean flag here to our state level and secondly we go to our scrollable widget in this case the list view and we wrap it inside of a notification listener so that we can detect if the user is scrolling up or down and therefore we get here every time a scroll notification and now if the user is scrolling up then we want to make our floating action button visible again and if our user is scrolling down in the list then we want to make our floating action button invisible and lastly for performance optimization you can also include here these boolean flags so that we not call always the set state and with this if we scroll down in our list then the floating action button and appbar disappear and as soon as we are scrolling up then both of them appear again and the advantage of this is that as soon as the user is scrolling then he can focus completely on the content and if he scrolls again up then he sees both of them and can also click and interact with the floating action button and the app bar and by the way if you want to get here this whole source code of this application then you can get it with the first link in the description and with the second link you can get access to my flutter courses where i teach you how you can become a better and more efficient developer if you like this video make sure to subscribe to my youtube channel [Music]

Channel: HeyFlutter․com

Views: 22,888

Keywords: android, auto hide, auto-hide floating action button, auto-hide floatingactionbutton, autohide fab, floating action button, flutter, flutter appbar, flutter collapsing toolbar, flutter hide appbar, flutter hide appbar animation, flutter hide appbar on scroll, flutter remove appbar, flutter show hide appbar, flutter sliverappbar, flutter tutorial, ios, listview, nestedscrollview flutter, notification, scrollable, scrollnotification, sliverappbar, sliverappbar flutter

Id: Zs3D6vs7h-k

Length: 3min 32sec (212 seconds)

Published: Mon Sep 20 2021