Flutter Tutorial - Transition Animation - Locations UI Design

we will create this design here where you can drag the widget around and then it is expanding or not expanding and then you also can go into this full view screen and that's what we want to build right now first of all we start with the sliding down and also sliding up and we start with this design already so this is not complicated here's some bottom bar and some add bar and then we have here some images in the middle with some text at the top and also at the bottom and now we want to create this a transition animation so i go here into our page view builder this is the builder which builds here all the images and here we have this location widget inside which is one of these cards and here inside we have our image widget which is exactly the image which you see here below and now we want to create this transition first of all we start with creating here this expanded boolean flag and this is basically the flag every time if we have this here expanded or if it's not expanded and between these two states we want to create the animation so i can show you in the end how the animation looks like and this is what we want to create right now with this expanding flag and therefore we put here around our image widget first of all a stack and inside of this deck we have here our animated position and with this one we basically can change the position of our widget and if you look here close to the example you see that this image will go up a little bit and this is what we want to animate first so we only animate this image and not the white container because this is what we want to do later so we need to put this image a little bit higher and therefore i first of all defining how long this animation should last for 500 milliseconds and then we define here if it is expanded then it will be higher from the bottom so it will be 150 pixels and otherwise it will be less so 100 pixels and now if a hot reload you already see here the change so we have our image and it's centered in the middle and now we want also to add here gesture detector so that we can get the user interaction so that he can slide up and then also this widget is sliding up or that he can tap on this widget and then it is also sliding up so we create here this gesture detector and create here this on pen update and this means that the user if he interacts with this image here and drags here around then we go here inside of this method and here first of all we check if the y-coordinate is negative and this means then that he is expanding this widget so he is dragging here to the top and we also define here the other case so if the y-coordinate is positive then he is basically not expanding so he is putting here the drag to the bottom and now with the user interaction we have then here these two stages and this expanded what we change here is then carrying that we have here a different perspective and then it looks like it is an animation going on and now i simply can drag you around and you see that it is changing simply the image and it's only putting our image 50 pixels more to the top if i have it expanded and otherwise if it's not expanded it looks like this and we can basically do this with every widget which we have here and now we want to create here the second part this white background container so right now we have this image which is going up and this is cool however like you can see here this white container is first of all expanding a bit and it's also changing its opacity and that's what we also want to create right now and to create this white container we create a new widget which is called expanded content widget and now if a hot restart you see that we have already this widget and this is a pretty simple one so i don't want to create it with you together but basically we have here some text which is a star widget so we have multiple icon of a star next to each other and we also have here this circle avatar every time with some image and yeah you can get the whole source code with the first link in the description if you want to get here this design and with the second link you can also get my flutter course where i teach you how you can become a more efficient flutter developer and now let's look at the design what is changing here and basically in the beginning we have this image and then we have at the end stage here it open however we have here too much height basically for our white container so we want to cut it a little bit down and otherwise it looks already pretty cool and pretty amazing so first of all i will also wrap here around our expanded around our white container the new widget which is this animated positioned so we do exactly like before we have here some animation going on and we also take your 500 milliseconds for this animation so it is exactly the same as the other animation and now we set here the width and height and we take here the full size of our widget and then we change here the size depending on our expanded state or if it's not expanded so basically if it's expanded we have already a little bit more width and also a little bit more in height and otherwise we have less in height and less in width and now if a hot restart you see here the origin position so this is how it looks in the beginning and therefore we also want to put here a bottom inside and now everything is fine so if it is not extended we have here the bottom to 100 and it is exactly then behind this widget here and now you can basically drag you around and then it is opening up and this is only because we changed here these three properties and you can play around with these values to change the effect and basically i can also set for example here these values higher so you see what's going on here so in the default we have here a height of 50 percent and now we for example change it to 80 and then you see that this background white color is higher but what we want to do is we want to have it only to this year and therefore i have here set it to 60 and then it looks like this yeah and basically you can also directly play around with these values to find here the right value which you like and then he is every time animating exactly to this value which you define here and you also can play here around with this bottom number so for example i put it here to 100 then you see it is much more up and we will animate it here more down and this is then giving this cool effect that it's always going down and now if i drag it down it is simply hiding behind this image again and in the next tutorial we will also create this animation that it is animating here to the full screen view and therefore we take here some hero animation for the different widgets so that it is animating to the next screen which we have hello everyone thank you so much for watching this video please make sure to give it a thumbs up and subscribe to my channel here to get the latest news about flutter and see you soon bye you

Channel: HeyFlutter․com

Views: 23,565

Keywords: flutter, android app, ios app, mobile app, ui speed code, flutter app design, flutter responsive ui, nature app, theflutterway, app from scratch, flutter ui, flutter ui ux, flutter ui course

Id: RLPZzDOPXG4

Length: 7min 32sec (452 seconds)

Published: Mon Nov 02 2020