3D Animations in Flutter - Learn How to Stack and Rotate Widgets for a 3D Effect in Flutter

hi everyone and welcome to this chapter of flutter animations course in this chapter we're going to have a look at a simple 3D animation in flutter and please keep in mind the first thing that you need to know is the flutter as it stands today does not support really 3D animations at its core as you would probably think it does um or unlike what you may think it does but there is work being done for flutter as you all saw the flutter event in January 2023 that there is work being done to support 3D in flutter and at the core of the problem is the rendering engine for flutter which is a primarily 2D rendering engine even though you can apply 3D transformations to widgets as we've seen before using the transform widget these widgets aren't going to be rendered in the 3D space as you think and they are being rendered and I'm going to show you an example of how this actually affects animations and I think it's important that we have a look at this example together and create it together so you see how basically strange things can look like when you start doing 3D animations in flutter so let me bring up a simulator where I have the application running at the moment let's just zoom into it a little bit and like this let's see if I can zoom in even more it's probably not going to allow me to zoom in more let's see can I stretch it more perhaps bring it up there we go so as you can see here we have a cube and you if you have a look at the sides of this Cube one size brown green and we have orange blue and red but however when you start rotating things you can see like this blue side it's kind of like morphing into other sides and that orange part which is at the back is kind of being shown through even though another side of the cube is being displayed on top of it so you can the more you look at it the more strange it looks because size aren't really blocking each other as they should in the 3D space and this is the problem with the current rendering engine which is being used in flutter there is experimental work as I said being done on flutter to change this engine to a completely new engine that does support 3D rendering however that work hasn't really finished yet so I think what we're going to do in this example is to create this example together and then you can see how a cube cannot also be rendered but also to get an understanding of the limitations that we have to work with at the moment in Florida okay so basically it's a cute our work is to render a cube using normal widgets okay so perhaps using just simple containers we're gonna do this how can we achieve that so let's go ahead and create a project first I'm going to bring up our terminal in here okay and let's just go ahead and say flutter create example three and then we'll say Organization for me is SE pixelity like that okay and let's just say code example three and then I don't need this terminal anymore let's go here get repository was found would you like to open the repository open it I don't know it is open already so let's just say select device and I'm going to say iPhone 14 plus and then let's go into main Dart uh flutter scaffold application FSA for me and then let's go to workspace workspace settings Json and here I'm going to say zoom level five all right so that part is done let's I think over oops did I just start select oh I don't even know what I did I think I started debugging it somehow uh let's go here and say select device I think 14 plus was already selected let me just see if we can run the application so it's in motion all right so while all this is happening I'm gonna bring up my iPad screen so we can draw a little bit on the screen and I'm going to show you the premise of this example how this whole example is going to work okay how can we draw a cube using simple containers so let's let me bring up the iPad screen there we go okay so I'm gonna start drawing a little bit on the screen so I have to move move my chair a little bit so let's say that we want to draw a cube what we know already is that let's say that this is our screen and then we want to draw a cube usually we draw just rectangles so this one for instance okay it's a container let's say it's got a width here and a height then of course for a cube you have to have different sides right so you have the front side you have the top side you have the right hand side and then oops it looks a little bit strange but that's let's say like that and so this is the front side this is the top side you have the back side so this is T not J top side back side and then here at the there we go like this kind of looks strange but here's the bottom side all right and this is the right hand side so you have all these sides how can you draw these with simple rectangles well let's say that let me just create a new note in here like this let's say that we take all these sides like this so we first say here is the front side okay then we put another rectangle on top of it exactly at the same position but I render it like this on the screen so you see it's another rectangle okay so we see we say let's say that this is the front side okay and then we say this is the we start with the front and the back side so let's say this is the back side how can we make sure that the this back side is at the back of the of the cube well if only we could send it back like this in some sort of an axis so and that axis as you know we've already talked about the axis in flutter we have X and then we have y and then we have said which is in the in the surface of the screen and it goes in to the screen that's the set axis so if you could take this back side and send it back in the z-axis by some sort of a distance let's say this distance is a hundred points okay so we say okay so we draw two rectangles on top of each other front stays where it is and then we have back which then gets sent in the z-axis by 100 points okay then we got the front and the back sides so then we end up with a situation where we have the front and then we have some sort of a like this using some sort of perspective and this is our backs oh maybe I should have actually drawn it separately sorry differently here's the front side and then we have the back side that looks like this I don't want to draw it into the screen okay so there we go so we have front and back then let's say we want to draw the left hand side what do we do well it is very simple actually we draw another rectangle exactly where front is right here okay but we take this axis which is right there and we rotate this guy like this just like a door imagine you're pushing in a door okay so you have to now use your imagination in the 3D space you're pushing in a door by what angle 90 90 degrees which is pi divided by two okay so you take that and then you rotate this on the which axis this axis is the y-axis right on the y-axis you rotate that side you would say is it clockwise it is counterclockwise okay then what do you do if you want to render this right hand side of the cube which should be the side that comes here well you take exactly the same container which is you lay it on top of the front side and then you rotate it around the y-axis but but from this side you send it to the right so imagine basically the left hand side is a door that's got a handle here and then you push this handle in 90 degrees and you open the door okay so that's the left hand side and the right hand side of the cube is a door that's got a handle on the left hand side and then you push this handle in and the door opens like this okay so just use your 3D imagination so just imagine the left hand side is just a container that is laying right here that I'm pointing okay just like all the other sides and you just rotating it by 90 degrees in to the screen okay so that's how we will build a cube and of course also the bottom side is also very easy so let's say that the you put a rectangle in here and you want to make this rectangle the bottom side well what you have to do is just imagine that it is a very strange door that's got a handle on top and then you just lay it down on the floor like this you push it down okay so here is a handle on top I'm just going to push this guy down there's not so many things in real life that look like this so I can't really make an analogy for how this basically looks in real life but this angle is also 90 degrees so you're just pushing this guy around the x-axis right this is the x-axis that goes horizontal like this from left to right and you're pushing it down 90 degrees and this is clockwise motion all right so you're making it clockwise 90 degrees which is pi divided by two angle all right and also for those of you who've jumped into this video without having watched the first and second video please don't do this please go back to the first video because we talked about angles quite extensively in the first video so I'm not going to explain these all over again okay so that is the that is what we're gonna do in this video so we're gonna put how how many is it one two three four five six basically uh rectangles on top of each other or containers okay and then we're gonna just rotate these guys and change their axis by um doing a translation so we haven't done that so you see the right hand side the right hand side of the cube is going to be doing a rotation the left hand side is going to do a rotation the bottom side is going to do a rotation and the top side as well they're going to do rotations however the back side is going to do something called a translation okay translation is the movement of an object from a place to another place so if you look here let's say that we have the um we want to draw the right hand side of the cube so you're standing in front of the cube and we want to draw the right hand side okay so this is a container and then we want to basically take it around the y-axis in here from the from this point in here so this is our alignment and we want to take it that the the 90 degrees to the right so that it stands you if you look from front of it then it's pretty much just looking like this okay with perspective so now you've moved it to the right 90 degrees like this okay so that's for the right hand side it's a it's a rotation okay around the y-axis however for the um for the back side there's no rotation happening you literally take a container that is here and you just move it move in the z-axis back by a hundred points or something okay then it moves here all right so there's a difference and there is rotation Contra translation all right so when it comes to translation just think of an object moving in some Axis or it could be in one axis two or three okay just moving it all right however rotation is well it's just rotation for instance a door if you open a door you're not moving the door in an axis you're actually rotating it around the usually the y-axis all right however if you for instance take your monitor and you feel like oh this monitor that's sitting in front of my face it is a little bit too too close to my face I want to move it a little bit further away then you take like this stem or you take the stand of the monitor or even the size of the Monitor and you just push it back so you're moving back the monitor that's translation you're not rotating your monitor right if you want to move it farther away from your face you're not rotating the monitor you're moving it and that is translation that's like the best example I can come up with right now at five o'clock in the morning all right so now we've talked about the um the logic that we're gonna apply in this example so let's just go ahead and kind of create this example and see the shortcomings of displaying 3D objects and flutter as the rendering engine stands today so I'm going to get rid of the widget inspector in here and let's see what else can we do to clean up the space a little bit there we go okay so let's start a little bit here perhaps with creating some containers all right so we could start with all of these containers to be honest with you almost at once because this this how do you say this example won't make sense if we just create the containers and just not rotate them and have them stationary because all you'll see is just one of the containers and that's the one in front Okay so let's kind of talk also about how we're going to display these containers on top of each other well we need to create six containers right we have to somehow put them on top of each other and then start rotating them how do we do that well there's a very very important component or widget in flutter and it is called stack and his name applies it just Stacks widgets on top of each other usually there are different types of Stack but Stacks but the main stack widget that we're going to use in here is just called stack and that stack simply Stacks components on top of each other okay so that's the main component that we're going to use for almost all our animations in this course I think stack is going to be pretty much in every animation that we're gonna develop alright so we're going to create a stack and on top of that stack we're going to play six containers so let's go here in the scaffold first of all we're going to get rid of the app bar and then let's create a body and we say body and then let's say the body is uh let's start with the stack and then we say children empty and then usually I start from the deepest component and then I go up because it's so much easier to wrap components within each other so let's say the stack should be wrapped I think let's just put this stack within a column so let's say we wrap it within a column and then we wanna let's say column we have there that's good let's put on top of this one a size box with a height of a hundred okay and again this is not a flutter course really so I'm not going to explain all of these and these very small details this is an animations course you should already know how to use flutter and this this really is there just so we can get this little top spacing in here okay just size box a size box of 100 and let's just say its width is double infinity so we take the entire space and there is a comma missing somewhere okay and that's our size box and let's say the cones cross axis alignment is Center because we want the components to be in the center okay I think this structure is ready let's put this column also within a safe area so let's say save area good we have that in place and then in the stack we can actually start testing our setup and I can see our application is running as well I think it's on iPhone 14 plus so it's this is our app on the left hand side and on the right hand side is the one that we are going to develop so I think now we got the gist with what we're going to develop so I'm going to get rid of it like this so we only focus on our application so let's go in our stack and just create a container we say container color colors is red and then let's just say oh this can't be a console anymore and let's say width 100 and height is also 100 something like this okay and let's see how it looks like there we go so we have the basic setup ready at the moment so what we need to do is to create six rectangles in here okay but perhaps before we do that let's create our animation controllers and start animating this thing already all right and I actually don't know the width and height of uh the containers let's just go with 100 but let's kind of put this in a constant so let's say width and height is a hundred like this because otherwise we have to repeat this 12 times because we have we're going to have six containers right and let's see what happened here with an high too many positional arguments and the argument int can be assigned okay so this should be a double like this and then we have Heights as well in here there we go otherwise because we have six containers and Each of which is going to have width and height so there's going to be 12 repetitions of the number 100. so In Here Also Heights let's just say width and height like this and the result is pretty much the same as it was before so we don't see any difference on the screen okay let's go ahead and create our animation controllers animation controllers need a stateful widget because we need to dispose of them unless you're using flutter Hooks and we're not using flutter hooks at this moment so let's say convert to stateful widget then we're going to go in here and create three animation controllers and the reason for that is that as you can see in here we are rotating this entire box in three-dimensional uh in three-dimensional space around the X Y and Z axis all right the animation to be honest with you is not that important it's just so that we can see all sides of the uh the cube all right so let's go ahead and create three animation controllers in here and I'm just gonna copy paste this because it's kind of difficult to write all of these or just taste time all right and let's just go ahead and also before we go ahead and do something else I just want to show you the reason that this animation looks smooth is that we we're going to have different duration for the X Y and the Z axis animations all right if we didn't have different durations this animation would look really really linear and it would look very boring okay I mean it is boring but it would look even more boring if you created a linear animation for all three axis so let's go ahead and also assign an animation in here because we want to rotate our cube in three-dimensional space 360 Degrees around all the axises okay and 360 degrees is pi multiplied by two so we have a simple animation let's say late animation animation of double okay and we call it animation just simply like that and let's go in in its state and this part is very very simple we've already talked about this before and we're gonna have to create the x controller we say this an animation controller and let's say it takes 20 seconds and vsync we're gonna have three animation controllers in here so we can't be a single ticker so we can't say single ticker provider State mixing because we're going to have multiple animations as you'll see in here if I go ahead and create a y controller and I say why controller is like that somewhere we should oh right we don't get a compile time error but if you run your application you will get a runtime error and an exception and telling you that you can't have multiple animation controllers bounds to a state object or an object that is conforming only to a single ticker provider State makes them a single part of it simply states that you have a single animation controller and here we have three so just remove that Single part okay there is another mixing with this name okay so for the Y controller we're going to say it takes 30 seconds and for the set controller or Z controller as some some people call it we're going to say it takes 40 seconds all right our animation is going to be a full 360 Degrees animation and we're gonna just say it's a tween so animation is we say tween a double and we say it's a go it's a value so let's say it goes from I'm going to remove all of these like this like this and this and also I think our animation we need to change it from animation to Tween okay and I'll explain soon why we're doing it you see an animation object oops pi divided by two and we don't have Pi so let's just import math and I like to go and say show Pi only because that's the only thing that we need in here okay there we go okay so all right I was just going to explain the difference again between animation and tween a tween is an object that says between it's it's it says a value that's between begin and end that's it an animation however is probably it can be a tween it doesn't necessarily have to be a tween but it's some sort of an animation that's bounds to a controller okay and this guy is not at the moment bound to any controller when you bind it to controller you use drive so you say you drive oops tween and uh animate sorry you animate a controller controller like this so x controller I think we call it x controller so if I say final blah and then you can see all of a sudden blah is an animation all right so it's when you animate a tween for instance you can animate multiple things but a tween can also be animated using a an animation controller and then you get an animation object back but if you don't drive a controller with your animation then you actually get the actual object back okay so that's the difference so this guy at the moment isn't doing any animation but I'll show you later how we can actually bind it to some sort of a controller okay good so now we have our animation we have our objects in here we need to ensure that we're disposing of our controllers as well so let's say dispose I'm not going to explain this part so much we've already done this many times before okay and there we go and I'm just gonna restart our application let's have a look at the debug console no errors looks looks pretty good okay so now that we have these guys what are we going to do we're going to go ahead in the build function and actually start them so let's say x controller and I'm going to say reset it when the build function is called and then I'm just going to say repeat it and gonna do the same thing with the Y controller oops let's see if GitHub copilot can complete this and the set controller okay I really really like GitHub co-pilot and that's simply because it helps me as an instructor to write code so much faster and but also I understand I mean this is a little bit of tangent in this course doesn't necessarily have to have anything to do with this course but I feel like it it in order to to be able to fully utilize like any AI when you're programming it's like you need to actually know what you're writing if you don't know what you're writing or just going to accept all the suggestions from GitHub and all of a sudden you're going to end up in like a tangle of horrible code that you have no idea how to fix okay but since this code I've already written this uh GitHub Cobell is actually suggesting the same code to me which is really good okay good we're done with that now what we're going to do is this stack guy is we're basically going to animate this whole thing okay so let's put this guy in some so some sort of an animated Builder so I'm going to say this guy is rapid with Widget animated Builder however this animated Builder is the only animated Builder that we're gonna have in this um in this example in the previous examples we've used multiple animated Builders and we've just bound one controller to each animated Builder and simply is because if you look at the animation of this guy it says gimme and listenable you'd be like okay but listenable is just one object it's probably like x controller or Y controller how can we how can we give all three to this guy and that's a good question in in the previous two examples as I mentioned in those examples we could optimize the examples so that they don't need multiple anime animated Builders and in this example I'm going to show you how to merge these controllers into one listenable all right so the trick to that is to say listenable dot merge and then you give it an array of listenables there we go so now we have three animation animation controllers uh Each of which is fed into this array which is inside the listenable and then you just get one listenable back all right I'll and I'm going to show you actually how to extract these values from the animated Builder okay now we have the animations fed into animated Builder but we're not actually animating anything all right so let's go ahead and first of all add the Builder parameter here so we say Builder and this is the context and we get the child back all right so in here let's take this stack out and remove this and then just return it in here and also at the moment we have this stack guy in here and let's let's go ahead and apply some sort of a transform to it because we have our animation controllers in here but we're not applying the animations to anything so after we put all the sides of our Cube inside the stack we want to rotate the entire stack in all three axes okay so the x-axis Y and the z-axis so let's put this entire stack inside a transform so I'm going to say it's inside a transform okay and this transform says okay remember the alignment is very important where are we gonna do the um animation from where is where are we pinching our fingers on saying this is the Pivot Point well we want to rotate it around it's Center okay so I'll also I'll explain alignment a lot in the previous example so please watch the previous examples if you haven't watched them already so let's go into alignment and let's say the alignment is Center all right and then let's say well what is the actual transformation that we're going to do in here okay this part's very important let's start with Matrix 4. identity so we say zero out everything the transformation at the moment is completely zeroed out okay again this is something I've already explained before so we're getting an error in here so Z control has not been initialized let's have a look and see if that is true is that controller I can see why controller is being initialized twice so let's go ahead and save that controllers initialize now okay so everything's zeroed out you can see nothing is happening on the screen but we want to rotate this guy around the X Y and Z axis and we have our controllers in here but we only have one animation so how do we do that how can we bind an animation to multiple controllers and say okay the rotation of 360 Degrees around the x-axis should take 20 seconds and around the y-axis 30 around the z-axis 40. how do we bind this to multiple controllers well there is a function on um tween uh or let's actually go ahead in here yeah it's on tween let's just say it's on tween at the moment which is called evaluate and this evaluates let's let me show you how it works you can bind it basically you can bind a single tween to multiple animation controllers okay so I'm going to say here rotate Y and let's just say by zero degrees rotate x 0 degrees for now and then we also say rotate Z by zero degrees like this and then we have them on separate lines so let's say rotate let me put x y z for those of us who are OCD including me so let's say around the x-axis we want the animation all right but we want to bind it to the x controller so we say evaluate and then we say x controller so it's a 360 degree animation that takes as long as the x controller takes then we take the exact same animation okay be careful with copy pasting in here make sure that this is the Y controller and then the same animation on the Z controller so this is a good trick for you to learn so that it's kind of like an optimization trick that you can ensure you have one animation and which is bound to different controllers okay so there we go that's uh that's our transform so let me bring our container in here and I'm just gonna resize this a little bit let's see if we can resize it there we go I have no idea where this is now okay and I'm gonna just restart this whole application there we go now you can see we have our little rectangle which is being rotated in all three dimensions x y and z isn't it cool so basically you have a container that's just rotating all right so that's the front side uh but I think we need to decorate that front side a little bit a little bit more to be honest with you so let's see how we can make the front side a little bit nicer let's say that uh the front side let's go in here and find it actually there we go where is it it is here at the moment it's just a container with the color of red but we're going to make it green so it is just like in the example all right then what we're going to do is to um have a look at the Zed transformation and that is that is the part that trips up a lot of people so we need to talk about it a little bit but let's restart our app right now and let's see that it has turned into a green container and as you know as I explained on the iPad screen this front side of the container sorry of the cube is not really going to have any kind of transformation of its own because it's just going to be placed on the stack and everything else around it is just going to rotate around different axis so it's kind of like opening a box the front side is kind of like going to stay where it is and let's just say you have a flattened out box and then you're just gonna open different sides and the front is just gonna stay where it is okay so you really need to use your 3D imagination in here okay so let's say that the front side has no type of effect and let's just say if we're going to build the back side all right so let's create a container in here which is for the back side let's put a comment and say front and let's say then we have the back let's copy this container like we have in here and say Here's the back and for this container let's change the color to purple all right I'm going to move this color down so I think the colors should be after width and height which I think the width and height is a little bit more important You could argue differently you could say it another color is more important so let's just move those up for me it doesn't make any difference but I think one we should at least be consistent let's just put the color on top okay so the container which is at the back should actually be sent back in the z-axis so it has to have its own transformation all right so let's say that we wrap it within a widget we call it well it is called transform and let's say the alignment the is in the center okay we want to do to apply the transformation from the center and then we say that we want to take a transform which is identity and then we want to translate this guy we don't want to rotate it we say translate remember moving of the monitor that I mentioned and then we want to move it back in the set axis so we say move it back by the width and height all right so if we run our animation out oops unemployment to error Something Happening Here a render okay let's see what happened uh Vector 3 oh right because of translation at the moment we're doing width and height but the the values are only between 0 and 1 but we're applying a value of minus hundred and in here so let's say that we want to create a vector vector 3 in here okay and then we have to actually import some sort of a package for this guy so perhaps we could do that now it's called Uh Vector math all right so let's go in here and say flutter pop add Vector math like this and uh then we go in here and import it so we say import and Vector Mass like this I think Vector math 64 and we say show Vector 3. all right then let's go back to our coding here and Vector three let's put it in a separate line and we say 0 0 and minus width and height like this all right so let's restart our application and see how it looks like now you can see that the purple part is actually which is the back part of our animation you can see it's got its distance now from the top side right so we got that working now so we sent this guy back um into the z-axis all right but as you can see already it looks a little bit strange when they rotate on top of each other and that's simply because flutter isn't in the current engine we're using is not a full you see it's kind of like appearing on top of it even though it looked like it was behind it so this is this is the part that we have to live with but at least we're getting the animation right okay so that's good let's leave it like that so we got the back part working so let's continue with the sides now and the sides are going to happen between the front and the back all right so let's go in here I mean the thing also you need to realize is that the the reason that this is happening is that we're rendering the back transform this widget after the front even though it's sent back into the z-axis it's still yeah I mean it is maybe actually we could play with this a little bit so let's say this is like plus value uh but you can still see the purple one is rendered in front but then if you send it back I mean they both work the same but if we move this guy up it will be a different result so let's say stack here so we do this now you see it is rendered behind it all right and simply it's just because stack the renders as components kind of like JavaScript renders or reads code okay it's just like from top to bottom so first it renders this and then it renders this on top of it all right so that's it uh so you could leave it like that you could say this is back end that's front so let's move this comment as well up here there we go good we got that part working let's work on the sides now now that we got the back and front so we could start with the left hand side so right after this let's say left left side and for the left hand side we have a red container so I'm gonna take we could perhaps take the back uh here copy it and paste it in here for the left hand side and we just start with identity at the moment and we say the color for this guy is red all right however remember the red hand side sorry the the did I say the red hand side yeah the left hand side it has to rotate around the y-axis all right and let me bring up the iPad screen I think this is a little bit important um to explain on the screen so let's create a new note in here so what we have is this kind of a container in here we place it for the left hand side LHS okay left hand side and we want to rotate it around this y-axis in here like this kind of like a door with a handle here so the handle if the handle of the door is on the right hand side and you open the door going in then the door goes like this and it is pretty much pivoting around this axis right so it's pivoting at this point kind of it's pivoting basically like this okay so it's pivoting around all these points how can we specify that well that is using a transform and its alignment so we're going to say alignment is Center left okay and then we're gonna pivot it 90 degrees or pi divided by two onto the y-axis okay so the same same thing we could say maybe I could I should explain it right right now so if we have the right hand side of the Cube then we're going to Pivot it around the y-axis again right the both are y-axis this one and this one are both y-axis we're going to Pivot them 90 degrees like this or pi divided by 2 again but one is going to be a plus the other one is going to be a minus right because 1 is like pivoting like this which is a counter clockwise and this one is clockwise all right so but the angle is the same is pi divided by 2 and it's the right hand side it's kind of like a door that's got its handle on the left but it's pivoting around all these points okay so the the alignment is going to be center right and the alignment for this one is going to be Center left and again we've talked about alignments a lot before so I'm not going to explain them again okay so let's start building let's go back to the code I'm going to have to move my chair a little bit okay so we're working with the left hand side so let's move this guy and say we want to rotate it around the y-axis by a positive angle of pi divided by 2. all right so let's say rotate rotate Y and we say pi divided by 2 like this or you could just do it like this doesn't matter really actually it does no it doesn't matter I think the division will be double anyways okay and we also need to make sure that the alignment isn't Center it should be Center left like this all right so let me just restart our application and have a look at the simulator there we go now we got that working and let's have a look I'm going to restart the app one two three there we go you can see the right hand side uh sorry the red container is on the left hand side all right so if I restart it again you can see it starts from the left you see okay so let's Now work on the right hand side so I'm going to take this transform left hand side like this and we can work on the right hand side I'm just going to copy paste that and place it right here and the right hand side is going to be blue like this and also the rotation is going to be exactly the same but it's going to be on a minus angle okay and then also in here the Pivot Point remember is on center right okay I just drew that on the iPad screen for you there we go so now we got the blue which is on the right hand side now the only size that we're missing are the top and bottom all right so uh right after this front side perhaps we could render the top and bottom so what I'm going to do is I'm just going to take the left hand side right after front we're just gonna say top top side all right so the pivot point for this guy let me bring up the iPad screen here create new documents so if we want to take this container in here and kind of like move it to the upside of the cube it's as if you have a handle down here and you just push this guy up by 90 degrees around this axis which is the x-axis and our pivot Points are here which are it's kind of you could say top Center okay top Center okay and we need to move it up basically around the x-axis so let's have a look at how we can achieve that in the code oops did I just put a breakpoint so let's say top side and also say the top side has a pivot point of top Center like this and we're going to rotate it around the x-axis all right and we're going to leave that angle like that all right and the color is going to be orange so let's have a look at the results oops here there we go that's the top I'm going to restart the animation let's see like this there we go all right and also then we're going to have the bottom side so I'm going to copy this and let's just go ahead and copy and then go in here and say bottom side I'm always really wary not so big fun a big fan of copy pasting to be honest with you and let's say bottom center which is the pivot point for the bottom side just the opposite of the top sides top Center pivot point and the rotation is going to be exact opposite of the top side all right there we go so and the color I think was brown um Brown all right so there we go now we have all the sides and I'm just going to restart the animation and then you can have this look the bottom is here which is the brown one and then the rest of the parts are also there but this whole animation I mean we're done pretty much with this example but this whole animation looks really strange and not the animation itself but the result how it looks on the screen and that is simply because the current rendering engine in flutter and especially how widgets are um rendered on screen are kind of rendered in 2D space kind of it's not going to be able to draw these sides for you correctly and understand that hey oh this brown thing like it is on the right hand side so when it rotates I should hide it behind the ones that are displayed on top of it it just doesn't understand that okay so that's why this animation at the end when you look at it things just morph into each other other and in one side that should not be displayed gets displayed in certain angles Etc okay but I still think it's an important exercise just so you exercise like rotating stuff sorry pivoting stuff with transform okay so hopefully you enjoyed this example in the examples to come now that we've talked about the uh like the shortcomings of the current engine in flutter we're gonna work with some applicable examples of how animations can be used within flutter and we're also going to work around some of these limitations in the coming examples hopefully you enjoy this example and see you in the next one

Channel: Vandad Nahavandipoor

Views: 14,063

Keywords:

Id: vqrmXhT2HQg

Length: 44min 0sec (2640 seconds)

Published: Tue Feb 07 2023