Flutter Material Animations | Animations package

doing those finishing touches on your app can sometimes be quite difficult so we are going to learn in this video how we can take animations from the animation package and then implement those into our app so if you just take a look at what we actually have si start outdoors as a start application we have a very simple application which has a indexed stack to display these tabs for the tabs we have used a very simple ListView with items we cannot press on any of them but what we want to happen is when we press on them we want to navigate to a new page out of course we want to do it within animation these tabs are also going to be animated which is going to give a nice or smooth fade effect and then for the last thing we're going to animate is going to be this dialog and what we press this dialog it will be animated with a fade scale effect so going back and looking at the code we can see that I've already built up this structure so if we take a look at the homepage we have a simple index tag with some index which is going to be the indexed we select and then the tabs and the tabs is you stay home tab distance tab and school tab and these are super super duper simple we have used a list you with a bill tile or list time and now for the other pages we have a center and some text and button and just a central text so to start this off we're going to close the main file go to go to home page and we're going to start with the list types so if we go to the Home tab this is going to contain the list tile and instead of returning the list tile right away we want to use the animation so to do that we're just simply going to cut this out for now and we're going to have a open container and this is as you can see imported from the animation package so if you don't have that you just have to import it and if you just look at the pops a camel really fast this is how you import it and the version will vary depending on when you're watching this video so we go back we can see that this is requiring some things to work so we have to have a closed pillar and that will be represented for how the widget will look when it's closed so in this sense the actual list time so if we implement the close builder it's going to have a if you actually do this we can see that this requires a context and action so the context self-explanatory gets from the context we have the action and the action will be what if we call this we're actually going to call the close builder or close action so for example we can pass this to the to the widget and that will be then going to open the widgets to the open container but we don't need to do that because I'm going to show you why because or I can actually explain now these are actually going to be called for standard if you press the item which are inside this builder but we could pass it down to the widget if you want to have for example another button to call this so for the closed pillar we are simply going to return the build list style and then pass the index and the reason I'm passing the index is because I don't have any objects to work with so I'm used displaying a indexed so that makes more sense forward the open container which is going to be responsible poor for how it's going to look when we're actually opening or opening this widget and that will be responsible for what the page will be when we actually select this widget so in this example it will be the selected item page and the selected item in this case this is use the index again so now if we actually save this and we go back to the code and I'm just going to restart this really fast we can see that we have this items still but now if we click on them we can see that we are getting this nice animation opening from this list tiles now we can see though that we have this kind of card view and that's because all of these are cards so you could have a separate between more if you want to have that we can also leverage or change this elevation so going back to the code we can see that open container actually has some properties for us and I will just going to set for example they're closed elevation to 0 looking back now at the code looks like we have to set it again we can see that we don't have any elevation the cards is still white because that's the the standard color but we can change that of course as well we're not going to bother with that for now but now we have that animation for display styles so the next step we're going to do is implement the animations for changing the tabs so to do that we're going to go to the home page which is responsible for that so as of now we have a indexed stack I'm just going to push this down so you can see the other implementation we are going to have so instead of a index tab we're going to have a page transition switcher and that will require a new parameter which is the transition builder and that requires a child primary animation and secondary animation so this child is going to be the child that we want to display so in the I don't forgot I forgot name about the indexed thing let's see if the name was being that stack so instead of the index stack we had children which was going to select right have bitten depending on the selected index we instead of going to have children have a child and that will be tabs on the spot of or index of the selected index so now we have two this child will actually be this one we get in the transition builder so what we're going to do if this cell is that we are going to return a new widget and this widget is going to be a fade through page transition and if I just close this and format it we can take a animation and that will be the primary animation that we get from the parameter or the transition builder the secondary mission is of course the secondary animation and then we're going to have a child which is the child we get from builder so now again if we refresh this hotel application and you switch tabs we can see that we already now have a nice switching animation not giving that stuttering stay look but giving it a nice fading animation for the four with the pages so now for the last animation we're going to implement it's going to be actually if we used show this again it's going to be it's going to be when we press this button and this dialogue is going to appear and this is actually one of the most simple animations I ever seen I posted this on Twitter and it's gotten quite a lot of people to actually retweet alike so this will be very fast to show you so if we go back to the code we're going to go to the business tab so as of now we have a show dialog but we don't want to have a show dialog and more because show dialog doesn't give us a parameter for the animation or we could implement a custom animations but why bother when we can have the complete animations so we're going to instead of having a show dialog we're going to have this show model and this show model actually comes from animation package and then we actually used to have to do one more thing which is give it a configuration and this configuration if we use check this is of type model configuration and there's a bunch of difference coverage say configuration configurations we can have so we're going to have the faint scale transition configuration and that's all that's literally all we have to do so let's refresh this look at the application go to the business tab open the dialog you can see that we already have a nice fading scaling animation that's all we have to do to implement these 3d animations where the list I'll we have the tabs and we have the display dialog if you liked this video please let me know by liking and subscribing to the channel they will probably pop up some videos up here so click them please it helps if you would like to you can support me on patreon down in the description and of course I will see you in the next video bye [Music]

Channel: Robert Brunhage

Views: 13,476

Keywords: Flutter, Flutter animation, Flutter material animation, flutter animations, flutter material animations, Flutter made easy, Robert Brunhage, Android Material animation, android material animation, Flutter polishing app, Flutter clean animation, flutter clean animations, app material animation, application animation, iOS animation, Flutter ios animation, flutter android animation, flutter animations easy, flutter how to add animations, Flutter adding animations

Id: vWBWfTgUaRI

Length: 10min 1sec (601 seconds)

Published: Fri May 08 2020