flutterQuickie - Custom ToolBar & Disappearing FAB

hi everyone in this lecture we will be making this app here where we have a custom scroll view with sliver apart and sliver to box adapter body not only that when we scroll up you see this thing appears and then it will disappear and this button will appear so with that being said let us start coding alright to save both of us sometime i have gone ahead and made this app so flutter create custom toolbar and disappearing fab of course with under scrolls in between everywhere and i have a very default app here the counter app to be exact so let us start coding together i'll remove everything let's bring import material and we need our main function so run app const my app underneath which i'll bring us that less widget only if it suggests me yeah so my app and about the container will change it to be a material app where we want the debug show checkmark banner to be false and we need a home of home page i'll put a const here too now this homepage should be a stateful widget so let's make one and here i'll return a scaffold now this app for this app we will have a custom scroll bar and a customs body so for the scaffold we will not initiate the app bar we will initiate the body with custom scroll view for the custom scroll view we have slivers this list where we will start working now this lever has a sliver app bar where we have extended height so the extended height i'll set it to be 250 and we have flexible space the flexible space takes a flexible space bar not really sure why is my computer lagging so much flexible space bar inside of which we have a few different items that we can set so i'll set the center title to be true and the background to be image dot network and this image.network i have selected an item that i want to use i'll use this so i'll copy image address and paste it here all right also while we are here let's put the fit to be box fit dot cover so it takes up the whole space yes better now for the flexible space bar we have a title and for the title i want a row so that we can have another picture and a name so i'll set a row and the row needs a children the children firstly i want a sized box of width 12 and i'll just copy it because i'll be using it twice and then we need a circle avatar a circle of water that takes a background image that now must be a network image after it we want the size box again and then a text the text should say flutter craft so let's get an url for this image here like the older one i have already gone ahead and selected this man's image which i will copy image address and we can get rid of this now and i'll just paste it here and if we save it all right that is nice so we have this thing here now for the body after the sliver app bar we have sliver to box adapter sliver to box adapter needs a child where i'll make a list view dot builder and the liz view builder will take an item count of let's say 20 and an item builder of ctx index and it will return us a flutter logo you can put whatever you want here i'm just my main focus for this video is the sliver app bar not the body the body is dependent on what which app you were building but the app bar is the critical part that you can use to make amazing designs so i'll save it now the problem is we have we are in a sliver inside of which we are in another scroll view so for the listviewbuilder we have to call primary to be false and uh shrink wrap to be true now if i save it you see things will come back to the screen all right i'll make it 50. yes now we can scroll it properly great this lever app bar let's get it back to the sliver appear again the sliver app bar has a few properties that we can use so firstly we have the pinned which i want to be true we have a let's say stretch i guess stretch which also should be true so now if we scroll it you see we have this very nice animation going on here that is great it's a pin because if we scroll properly the app bar won't vanish and if we scroll all the way down the image inside it will zoom in so now that was all good and nice now what i want to do is whenever we take this up here i want this i mean when we bring it down while the image is fully extended i want this row to be vanished so to do that this row i'll select this row here and i'll wrap it with a layout builder a layout builder takes a builder where we need to pass a context and a constraints so i'll just name it cons and here i'll return our row all right great now uh let's make a variable so i'll come to our state class and make var top equals to zero so this is a double variable so if we come to our builder now we can call that very top here and say cons dot biggest dot height so what we are doing is we are calling the top variable that we have made there and cons the biggest dot height will give us the in height of this extended place uh if we go here let's change it to be uh double and we should be good all right now uh we we were using this layout builder so that we can use this top right and now we want this row to be wrapped inside an animated opacity so to do that let us go to this row and i'll wrap it with the center where we will change it to be animated opacity and the opacity needs a duration so the duration will take a duration widget where we will set the millisecond to be 300 and the opacity should be if the top is less than or equals to 200 i want it to be fully visible or else it should be fully opaque so i should not be seeing it so with that if we save it and go up you see it's coming when whenever we go up and if we come down it's gone all right not only that we're almost done but i want to show you a new trick i want to put a button here and whenever we scroll up that button should become smaller smaller smaller unless it untils it until it disappears and then when whenever you extend it the button should come back to do so let's get outside the method and let's make a new widget so a widget build fab i think we should be inside here yes where i want to return a floating action button so a floating action button and we need an unpressed also a child i'll put the child to be an icon of icons dot camera i'll just pause the video my bad this entire widget should actually be outside of the whole thing so let's get up and yeah we're good now to use this widget firstly i'll go up where we have the scaffold and the entire custom scroll view should be inside a stack because we have to change the position of the button so i'll firstly wrap it with the column and then i'll change the column to be a stack now inside of the stack where we finish custom scroll view so here we have the custom scroll view underneath this i'll call the build fab and if i save it now you see we have the fab up there but since we are in a stack we can use a position widget to change its position so let's wrap it with a center and let's change the center to be positioned and we want the top to be 250 and from right i want it to be 20 and if we save it that is a nice space now we have a problem you see it's not exactly on 250 you remember we had this extended height to be 250 and also for this position i've set it to be 250 but these are not aligned the reason because whenever you're doing something like this my advice would be to use a platform so a platform from this one is from dart html we'll take the one from dart dot io dot is ios i want it to be 270 else it should be 250. so yes now you see it's all aligned now what we have to do is whenever we take this thing up i want this button to go up with it as well and become smaller to do so we have to make a controller let's go up where we have this top and here we will make a new controller so scroll firstly let scroll controller should be inside this variable scroll controller and we will initiate it inside an init state inside this unit state i'll set this scroll controller variable equals to scroll controller so let me initialize it all right now we will call this variable scroll controller dot add listener and this listener should set state each time we are changing it so the set state all right so what we did is we bought a listener a controller that is going to control this uh motion and we have added a listener to it so whenever it's it changes even a bit it will keep on setting the state asset state because we need to refresh the app so that also the position of this widget changes so let's go down where we have this build fab and now we have to do some configuration so firstly i'll make a double default margin so this double default margin should equals to be this very thing here so ctrl c and we can paste it oh one thing i'll change this top to be the top that we have up there so this top okay then we need a double default start that should be from 230 so i want the button to start shrinking when it's 2 30 not immediately but when it's 2 30. and then we have a double default end so when should it stop shrinking when it's default start divided by two so default start divided by two now we need another double top so top equals to uh it should be our default margin so default margin should be the top the faulty default margin not only that we need to set another variable which is double scale so i'll set a scale and this should be equals to 1. now let us make the logic now so whenever our scroll controller starts scrolling so if the scroll controller you see we cannot use the scroll controller here it's because we need to get inside the inside this here right so if our scroll controller dot has client so has client means whenever it starts working right whenever it starts scrolling i want to set a logic so the logic should be our double offset a new variable offset should equals to be the scroll controller dot offset so we made this variable up but this offset is coming from this controller so offset means what is the amount of uh distance we have moved from the starting position right now what we want to do is we want to minus that distance from the top so top minus equals to offset so the logic should now go as follows if offset is less than default margin minus default start i want the scale to be one else if else if the offset is less than default start minus default margin i want the scale to be equals to default margin minus default end minus the offset and this should be divided by default and else i want the scale to be equals to zero so now if you read here we have three variables here on which we are we have written this logic so whenever we start scrolling once this condition is true the scale should be one right so when it's fully extended it should be one and when this condition is true so whenever we are actually scrolling the scale will start to become smaller and smaller and smaller so this whole thing will become smaller eventually when we will replace this entire method here i mean this entire logic here the scale will become zero and this thing will disappear now to do so let's come to the floating action button and here we can wrap it with a transform widget so i'll put a center and then output transform transform needs a transform argument where we have metrics for dot identity and this should be equals to dot dot scale and inside of which we will pass our own scale all right so if we restart the app and also since we are here let us put the alignment to be alignment dot center and let us save it and it's finally done but we see if it's working properly so let's scroll up it's not it's not scrolling because we haven't used the controller for the custom scroll view this custom scroll view has a controller property where we have to set it to be the scroll controller that we have created so the scroll controller and now if we save it we should be good to go and we should be scrolling properly so let's try alright that is nice so with that we are done with this video i'll see you in the next one peace

Channel: Fluttercraft

Views: 52

Keywords:

Id: a2TTUsu98yk

Length: 22min 43sec (1363 seconds)

Published: Sat Dec 04 2021