Complex Animations in Flutter using Rive | Flare

[Music] good mobile apps have become synonymous with simple UI and sleek animations all the development frameworks provide easy ways to implement good-looking UI and cover all the expected animations and flutter is no exception now when I say they expected animations I'm talking about animations like these these are animations that you would expect a UI element to go through these kind of animations are extremely useful for providing context and feedback to the users and it's more than enough to deliver a great mobile app but sometimes sometimes we want to do a little bit more you could argue that the morphing and the physics effects provide more context and better feedback but I would consider that to be a lie this is something else this is a designer or developer that wants to do something creative for the context today we'll be calling these abnormal animations flutter provides great ways for us to create normal animations they just come with a lot of boilerplate code for an abnormal animation like this you would require a lot of code to animated devs usually look at animations like this from a design and say well that's pretty but it's not realistic to do in code each of the menu items would need to line in the slide righteousness a lot as nestled in terabytes plural slash at the end and for each of these animation pieces you would have to sync it up and provide an animation control keep track of that controller hide your tweet anim keep it all in symbol its own ticker mix and you get the point this is where Flair comes in and also why this tutorial exists Flay is a design and animation tool created by two dimensions that help you add high quality animations to your app have a flatter package that allows you to play these animations let's take this animation it has the button then it has this toolbar with some icons on it what if we want to interact with those icons my name is dan from false tax and in this tutorial we'll be adding some interactive areas to our fillet animations one more thing before we get started please subscribe and like this video if you'd like to follow along with this tutorial head over to github.com slash fault stacks forward slash flutter - tutorials store this repo and then clone it then open up flutter fly part 1 and drag the start folder into IDE we'll start by doing all of our setup will include Flay flatten or pop speak and we'll also include our animations from the assets folder and that's all for setup head over to the flair demo file import the fly actor and added as the body of a flared mo state when you run this code you should now see a large purple background with a static image of our animation file there's nothing playing in animation because we haven't defined our starting animation we can set our animation property to let our flay actor play our initial animation we will change our animation property to activate and when you save you should see the animation player the next step would be to toggle our animation so we want to describe it to in activate and deactivate we will add a boolean value called is open and we'll swap our animation key based on the is open value then we want to wrap our flare actor with a gesture detector and on tap we want to toggle the is open value within our set state function after you've saved and you tap on your screen you should see your activate and deactivate animation layout that's even a little bit too easy but there's still a few things left the one big question is how am I going to interact with different parts of my animation if it's all one animation for this we'll start looking at the gesture detector the gesture detector provides you with an on tap up function callback this callback also has a value that provides you with touch information this touch information contains our global touch position and that's what we'll use to figure out which animation we want to play based on where we touch our current animation let's get a visual representation of what we would like to happen on our animation we'll divide our animation into two sections we have a bottom section of a top section then our top section will be divided into three different touch areas the bottom section will toggle between activate and/or deactivate keys then each of those top three sections will map to the tapped animations that we have within our file to perform all of these actions we would need our local position and not our global position the local position means that is the position tapped in our animation element instead of on the entire screen in flutter when you want to get your local position you need to use your render object this render object can be retrieved through the both context the way our code is currently set up if we get our end object our global position will be the same as the local position we can fix this by moving the flare actor and our gesture detector into its own stateful widget we'll start by creating a new file called smart flutter animation dot dot will import the material package and then create a stateful widget called smart fillet animation this widget will return a container of what to 9/5 and height to 5-1 these values correspond to the art board dimensions as you can see in the animation file will move over all our code from our flare demo file into our child widget within copy our is open boolean and input of flea active file we can then head over to our flare demo and we can replace all of our gesture detector code with our smart flare animation when you save and run this code you'll see that the animation is a little bit smaller and it also moved up to the top of our view we want the animation to be at the bottom Center so we'll wrap our smart flare animation within a line widget and we'll set the alignment to bottom center now we can start adding our custom touch logic head over to the smart flair animation file and change your untap to untap up and then pass in a parameter called tap info this parameter contains the global position of our touch to get our local position we'll get there in the box of our current object using our bolt context and we'll map that to our local position through the global to local position function once we have a local position we now want to figure out where did we actually touch this animation based on this little visual thing I showed you earlier there's only a few things we need to know we want to know if our top off was touched and for that we'll use the Y offset and check if it's less than the animation height divided by 2 then we want to know if our left side was touched for this we'll check the X offset and see if it's less than our animation what divided by 3 then we'll check if the right side was touched will again use the X offset and we'll check the animation worth divided by 3 times 2 and lastly we can check if our model was touched by checking if the left side was not touched and if the right side was not touched at this point we have all the information we need so we can start adding in our if statements the first one we want to check is if the left side was touched and it was in the top off that will be the top lift so we'll print our top lift second we'll check if the middle was touched and if it's in the top off we'll do the same for the top right within the law statement will determine state by checking if our button is open or not and at the end of this who will always struggle the is open value this all needs to happen in the set state function so we can take our set stage from below and we can move it to the top of our function when you run this now you should still see the same behavior but additionally if you click on any of those toolbar actions at the top you'll see it print out the values that we put into our print statements next up we need to start playing multiple animations so we'll need something better than a boolean to represent our state will create a new enum called animation to play this enum will have activate/deactivate camera tap pulse depth and image depth values well then add a new member variable called animation to play and give it a default value of deactivate we also need to add a string mapping we need to map the animation to play value to our animation keys well this function will use a switch statement for each of the cases we'll map the enum value to a key in the animation then we'll add another function where we will set our animation name within set state now that we have this we can call our set animation to play function with appropriate enum we'll replace all of our print statements with a set animation to play function call and passing in our enum values the last thing we have to do is to replace our key for animation in the flutter actor with a get animation function that we just created and if you save and run this code you should be able to interact with every item on the animation now this to problem we still have left by relying on the set state to change your animation we can only play the same animation once in a row the second problem we have is that we can start playing animations even if it's not in the correct state by touching the toolbar actions while it's closed you can still play those animations to fix the first problem we'll start using the fillet controls well import of flare controls great a new member variable called animation controls will give this controller to the flee actor and then we'll replace the code in our set animation to play with a call to the controller to play the animation you should now be able to tap the same animation multiple times in a row and it should still play fine the second problem will be unique for each animation for the specific animation we don't want to play any of the depth animation if the toolbar is hidden what this means in code is that if the last played animation was deactivated we don't want to play the tap animations we'll start by adding a loss plate animation to the top of our Clause will then set the last play animation after we play our actual animation we then want to figure out if it is a tapped animation for that we'll get the name of the animation and then check if it contains underscore tapped for the final check we want to check if it is a tapped animation and if the last played animation was deactivated then we want to return from this function and not play the animation that we intend to play with those changes you shouldn't be able to play your tap animations when the toolbar has been deactivated this was a UI experiment that I started because I wanted to create a larger style animation for something that I'm working on when building something like this in code it actually takes a lot of code to get it done it's not that it's difficult it's that it's a lot of boilerplate code to keep track of and you have less freedom than creating this animation in a cool tool like flare during this tutorial I was also inspired to create a package to help other devs do this first package would take away all of the setup and boilerplate code that we just went through and it will give you an even more reliable gesture detection let's start by importing the smart flip package and then getting all our packages my visual studio code was giving problems and so I used my terminal to get my packages head over to the Flair demo file and import the smart fly object let's get the basic set up and then I'll explain to you how the smart fly actor will help us to achieve what we just did in much less code will replace our smart fly animation with a smart fly actor and we'll give it animation what and height of the same values as our smart fly animation we're also provided with a filename that points to animation saving your code should show us something similar to what we saw at the beginning of this tutorial just a purple background with a static state animation being drawn smartly is a thin wrapper that surrounds the flee actor the flee actor is placed at the bottom of a stack and on top of that we put containers with gesture detectors attached to it these containers are called active areas for each active area you can provide a callback you can provide one animation name to play or you can provide a list of animations to cycle through when touching this active area so let's see how we can use this package we'll start by giving our smart flee actor a starting animation and we'll give it a deactivate key then we'll define a list of active areas that we'll supply to our smart flee actor the first thing we want to do is give an active area for the part of the animation that represents our actual button that toggles our toolbar to achieve this will create an active area that covers the bottom half of our animation we'll give it a lift of zero we'll give it a top value that starts at half of the animation height we'll give it the full width of the animation and then we'll give it a height of half the animations height we'll set our debug area to true this active area should cycle through two animations when it's stepped we'll give it to activate key and the deactivate key let's also provide this area with an untapped callback that prints out toggle now let's pass these active areas through to our smart flee actor when you save and run this you should see a debug area being drawn over the animation and if you tap within that area it should be toggling between the activate and the deactivate stage now that you know how this works we can then create our active area for our top left area we'll give this top and a left value of zero because it starts at the origin of this animation and we'll give it a width of a third of the animation width and we'll give it a height of half of the animations height since we'll be reusing these values for the next three active areas we'll create some local variables that will store these values for us we'll set the debug area true and will provide an animation name called camera tapped there's a problem we sometimes the Autry load functionality doesn't allow you to continue playing the animation to fix this just click on the refresh button next to your stop button in the IDE and it should all be playing again now that that's in you should be able to click on that camera tapped area and it'll play the camera tapped animation that we saw earlier in this tutorial now at this point we're dealing with the same problem of the camera tapped animation being able to play while the toolbar is closed to fix this I added a guard coming from property to our active area the naming is a bit off and I'll change that in the future but what that means is if the last played animation is in the list that you provide to that property then the current animation that you're trying to play won't play so to guard against our deactivate animation will supply an array with a deactivate value in it to our god coming from property now you should see that if you try and tap this value while the button is deactivated it won't play the camera tapped animation now that we are done with one of the top left active areas we can copy and paste it because the functionality is exactly the same the only thing will change is the left values and their animation name for the second active area we'll set our left value to 1/3 of the animations worth and for our last active area we'll sit the left value of the active area to the third of the animations worth times 2 you should be seeing all the animations play out if you touch any of those areas let's remove all the debug values so that we can see the animation how it's supposed to be and then we are done with this tutorial please like this video and subscribe to my youtube channel if you want to see the written tutorials follow me on medium since they come out about 3 to 5 days before the videos [Music]

Channel: FilledStacks

Views: 222,434

Keywords: Flutter, Flare, Animations, UI, Mobile UI, Mobile App, Google, Android, iOS, Mobile App Development, Flutter Android, Flutter iOS, Flutter Flare, Rive

Id: vsyjMrZa5OU

Length: 15min 44sec (944 seconds)

Published: Thu Mar 28 2019