Flutter SVG Animations With Rive

in a world where your app is competing with millions of others it's important for it to stand out visually as much as functionally sprinkling some beautiful animations across your app can really enhance its appeal and the user's overall experience svgs are incredibly versatile customizable and can be animated inside of your apps for a unique effect rive formerly known as flare is an animation software that can be used to easily create animated svgs the rive flutter package can then be used to seamlessly add the animations you create into your apps [Music] hello everyone my name is ashley and welcome to riso coder our goal here is to provide top level education and teach you the skills needed to become an in-demand flutter developer don't forget to subscribe and hit the bell icon so you don't miss a single video let's get started in this tutorial before we do any coding we're going to learn how to use the essential features of the rive editor after this section you should feel confident enough to start creating your very own animations then we're going to use pre-created animated svgs to create a ui only music player app let's take a look at the finished app now when we run the app the first thing we're going to see will be a splash screen with a dancing radio after 3 seconds we'll be taken to the music player page here we have an image of an album cover and a music player control interface here we have two buttons for going to the next and the previous tracks when we tap these buttons they will display a one shot animation next we have this play pause button in the center when the button is pressed from the pause state we're going to see the following animation then when we press the button again from the playing state we'll see this animation the play pause button is very interesting because it actually has multiple animations which play based on certain conditions this is achieved using a state machine in arrive and it is something we'll be covering in this tutorial lastly you may have noticed that when we press the play pause button it also plays and pauses the sound wave animation at the bottom and be sure to check out the written tutorial from the link in the description where you can also find all the code written in this video and go through this tutorial at your own pace for this tutorial we'll be using a very simple starter project all this project has are two pages and some assets in our lip folder we only have three files main.dart music player page.dart and splashscreen.dart our main.dart file has an app widget which returns a material app and the material app has the splash screen and its home parameter splash screen is just a stateful widget that returns a scaffold with a background color of yellow and i'm just going to swap out the splash screen here for the music player page so we can see it there we go so the music player page is also a stateful widget which has a scaffold a centered column and inside the column we've got this container which displays an image of an album cover to go over their music player theme these files we just looked at don't really have much in them and that's because the majority of this app will be built using animated elements this is where the assets folder comes in here we have the image we used for the album cover but more importantly here is where we have all of the rive files we will be using it would take a bit too long if we were to create these files during this tutorial so we pre-made them for you to create these files we used regular svgs that were imported and animated inside the rive editor when we're inside the editor i will show you how you can inspect and play around with these asset files on your own as i mentioned previously before we do any coding we'll learn how to use the arrive editor but before we get into that let's add the arrive dependency to our project so we don't forget to do that later on let's go to our pubspec.yaml and here we're going to add rive and we're using the most current version at the time version is 0.7.28 save that and now let's learn how to create some animations if you don't already have arrive account you'll need to go ahead and create one now to do that go to arrive.app and click launch or login you will then be taken to the login registration page and here you can create your account feel free to pause this video now and come back to when you're logged in and are seeing this home dashboard now that you're all set up you should be seeing this page here here you can see all of your work create new folders and create new files if you're working in a team rive also offers a collaboration feature while all of the features we'll be using today are free to be able to create teams you would need a paid subscription so first let's go ahead and create a new file like this when you create a new file you'll be asked to create an artboard an artboard is like a canvas where you'll be creating your animations and graphics we're going to leave the default dimensions here so just go ahead and click create when you click create you'll be taken to the design mode of the editor in design mode you can create your own graphics or import svgs created in other softwares like adobe illustrator you can then edit whatever you create or import here also in rive your work is saved automatically so you never have to worry about remembering to save your files in the top bar of the editor you can click on this plus icon over here and here you can do things like add shapes create paths using the pen tool create additional artboards bones and groups let's add a star to our artboard so let's go to the shape menu and add a star here now click on the artboard and drag out the star until you've reached its desired size we want our star to have dimensions of 200 by 200 so we're going to select it and then go over to the sidebar over here and change its dimensions in the size settings so let's change the width to 200 and the height to 200. perfect when the star is selected you can see these arrows pointing to the x and the y axis the circle over here and the box surrounding the shape you can use the portion of the arrows past these little squares to change the shape's position and the portion of the arrows behind these little boxes or these little squares to change the shapes scale values you can use the circle to change the rotation value and if you pull on the box sides or corners the shape scale value and the position values will change if you are interested in more precise editing though you will likely favor using this right sidebar to change these values let's revert back to our original values over here and that should be good now let's give our star a little bit of style let's make it yellow by giving it a fill color of zero ffc00 zero press enter perfect and let's give it a stroke of color black with a thickness of four perfect we're going to limit our designing to this but there's really a lot more you can do now let's center the star in the middle of the artboard and also zoom out just a bit now let's head over to the animate mode and when you switch to animate mode everything stays pretty much the same the main difference is that this timeline that appears at the bottom over here now in this mode you can create one or more animations by changing the properties of the shapes and layers and adding keyframes to the timeline for the changes that you make let's create our very first animation double click on the existing animation over here and let's rename it to rotation it's very important to name your animations thoughtfully and strategically because the names you add here will be used inside your flutter project to add the animations into your app now let's make our star rotate from 0 to 360 degrees to do this select the star and make sure the playhead is at the beginning of the timeline you can see here the rotation setting is set to zero degrees so all we're going to do is click on this rhombus over here and that adds a keyframe to the beginning of our timeline you have now created a starting point for your animation next move the playhead over to the end of the timeline and change the rotation to 360 degrees press enter and that adds a second keyframe to the end of our timeline which will represent the end point of the animation so when this animation plays it will transition from 0 degrees to 360 degrees within the animation duration you can change the duration and playback speed by clicking on this time over here we're going to leave it as is now let's see our animation in action to quickly go back to the beginning of the timeline you can click this button over here and then click play to see the animation awesome the animation plays only once because it's said to be a one-shot animation you can also change this to a looping or ping-pong animation over here now let's create one more animation the next animation we're going to create will shrink and grow our star so let's add an animation like this and rename it to scale make sure this animation is selected and also select the star make sure the playhead is at the beginning of the timeline and now go ahead and click on this rhombus next to the x and this rom is next to the y axis of the scale setting this will ensure that our star is initially at a hundred percent scale next move the playhead over to 30 frames point in our timeline and change the x and the y axis to 50 press enter and press change this to 50 and press enter again great we're going to add one more keyframe to the end point of our timeline so let's move the playhead over and here at the end we want to start to grow back to its original size so we want to set the scale values back to 100 we can do it like we did previously by changing them in the sidebar over here or since we already have a keyframe with the same values at the very beginning we can just copy it and paste it in the end like so so you can select the keyframe copy it and then add it right here to the end of the timeline now let's bring the playhead back to the beginning and see how everything looks awesome great job next we're going to get into state machines in live let's add a state machine to our project and then discuss what state machines are all about so let's hit this plus icon and add a state machine let's rename it to star animation now naming your state machines is just as important as naming your animations thoughtfully because you will also be using this name you create here inside of your flutter project so state machines provide a way to visually connect your animations the animations you add to a state machine will be considered states you can define certain conditions and trigger transitions from one animation or state to another based on the given conditions this can really enhance your animations and give your great control over them inside of your app now let's take a look inside of the state machine panel and here you can see three states entry any state and exit transitions from the entry state define which animation should play first transitions from the any state will play the animation regardless of which state is currently active as long as the conditions on the transition are met and transitions to the exit state will exit the state machine the more you experiment with rive and state machines using these states and connecting your animations will become increasingly more intuitive first let's create some simple transitions for our animations inside of the state machine click on the scale and rotation animations and drag them into the state machine panel then arrange them in the following order first let's move these two out of the way and then place the rotation over here and the scale over here when you hover over a specific state or animation you're going to see this dot appear now just click and drag to the state you want to transition to we want to transition from the entry state to the rotation state when you see the rotation state turn blue you can release the mouse you have now created a forward transition from the entry state to the rotation animation state you can now click this play button over here and see the transition in action awesome you can then hit pause to reset the state machine now let's add one more transition from the rotation state to the scale state and if you hit play now you're only going to see the scale animation that's because the exit time for the transition from the rotation to scale is set to zero meaning that we don't actually let the rotation animation play out to fix this we can select the transition from the rotation to scale state represented by this arrow and then we can enable the exit time setting and set this to a thousand milliseconds which is the time it takes for the rotation animation to play in full now hit play or actually reset the state machine from our previous play and hit play again and you will see both transitions play out now let's learn about inputs and conditions if you look over here to the left of the state machine panel you will see that we can add some inputs we're going to use these inputs to create conditions for our transitions if you click on this plus icon over here you can see that we can create a number boolean or a trigger input first let's create a number input let's rename it to level and just like animations and state machines your input naming should be done thoughtfully because you will be using these names in your code now we can use this input to create our first condition select the transition from the entry to the rotation state then click this plus icon over here and select the name of our input from the drop down menu here we can set the value for the condition and specify whether we want it to be equal to less than greater than etc than this value we're going to leave it as equals to and we're going to change this from zero to two awesome now let's do the same thing for the rotation to scale transition but here we're going to change it to 4. we're all done setting up our conditions so let's hit play as you can see the animations aren't playing that is because the value next to our input name over here is set to zero you can change this value to test your conditions so let's change it from 0 to 2. and now we see the first transition when we change it again to 4 we see the second transition amazing later on we'll learn how to initiate animations based on these kinds of conditions inside our code and we won't be using number input in our project but if you want to try it in your own project you could use it in combination with something like an in-app slider now let's add a boolean input and rename it to switch this input is named very accurately because it can only have two possible values true or false it's represented by this checkbox over here in the input panel so when it's unchecked it's set to false and when it's checked it's set to true now let's select the entry to rotation transition and delete this level condition and add a switch one instead we're going to leave it set to true so now rotation animation will play only when the switch input has a value of true so let's press play and then check this box over here there you go and we also see the second animation or the second transition play because this requires the level to be set to four and here it still is so to give you an example you can use this boolean input to create things like animated toggles in your app but really the only limit to what you can create with all of this is set by your own imagination the final input we're going to create will be a trigger input so let's add one now and rename it to tap the trigger input is also technically a boolean because it can only have a true or a false value but the difference is that this input can be set to true but then it is immediately reset to false so it behaves kind of like a button and it is accurately represented here by this kind of a radio button when we click on it you can see a white dot briefly appear and then disappear that is the visual representation of the value being set to true and then immediately being reset to false now let's add a condition using this input select the rotation to scale transition and then let's delete this level condition and add a tap one instead now we can tap on that button next to the input name and it will trigger the transition so let's hit play and then tap this button and there you go lastly if you want to download your animations and use the file in your flutter app all you need to do is click this button over here then download and then select for newest runtime amazing we are now all done with derive editor basics this by no means covers all of the features of this feature-rich editor but you should now have enough knowledge to start creating your own animations and also understand the animations we will be using inside of our flutter project if you want to inspect the arrive files included in the starter project all you need to do is create a new file in write and then drag the file you want to play around with into the editor now let's finally get to the coding portion of this tutorial there are multiple ways to add write animations into your flutter projects we're going to be looking at several so that you know exactly what to do no matter what your use cases first let's add the simplest possible animation which doesn't require us to control any aspects of it let's head over to the splashscreen.dart file and here we're going to add a container to the body parameter of the scaffold we're going to give this container a width of 400 and as a child we're going to provide our animation we're going to do that by using rive animation dot acid constructor and we're also going to import the rive package here now so as the first positional parameter of this constructor we're going to provide the path to where our animation file is located in our assets folder if you wanted to provide a file through the network you could also do that by using the dot network constructor so let's provide our path now it's going to be assets slash radio splash animation dot riv great and let's also center this container with a center widget and let's give this a save awesome now you see this looping animation of a dancing radio with floating musical notes yes it really is that simple now before we move on to the next page in our app let's make the splash screen a little bit more realistic we don't really have much to load in this app so let's just simulate the loading time by delaying the navigation to our music player page so let's go over here and create an init stay or override the unit state and delete this and here we're going to say future dot delayed and we're going to give it a duration of three seconds and here we're going to say navigator dot push replacement i'm going to leave the context as is and provide a material page route oops let's give this a save so it's not so messy and here we're going to return our music player page excellent let's add some commas so this isn't a big mess and now we can take a look at everything so yeah we're literally just delaying the navigation to the music player page that is all it is definitely not something you should be doing and a splash screen should be used if you actually have a lot of stuff to load in your app but this is how we're going to do it just for visual purposes only so let's give this a save and actually restart our app and three seconds should pass and there you go we are taken to the next page in our app next we're going to add a couple of one-shot animations head on over to the music player page dot dart and here we only have an image of an album cover right now so let's start adding some animated player controls since we're only focusing on animations in this tutorial the only functionality of these controls will be to display the animations but you could definitely tie in a real music player to the setup first we're going to add two buttons for going to the next and previous track when we tap on these buttons the animation will play once per tap first we need to add two controllers one for each button so let's go ahead and over here in the music player page state right above the build method we're going to add two late variables for these controllers it's going to be of type write animation controller and the first one we're going to call prev button controller and also let's import the arrive package and the second one also going to be late it's going to be arrive animation controller again and this one we're going to call next button controller we are marking these as late because we'll be initializing them inside of init state and that is because we want them to be initialized only once our page widget is ready now let's initialize these variables inside of init state so we're going to say init state and delete this and here we're going to initialize the preview button controller first now there's more than one class you can use to create a controller depending on what kind of animation you're displaying for these we're going to use one shot animation class if you notice though our variable over here is of type rive animation controller and here we're using the one shot animation class to create the controller object we can do that because the one shot animation class if you take a look extends the simple animation class and the simple animation class extends the arrive animation controller so due to this inheritance we're able to use the one shot animation and the simple animation classes to initialize a variable that is of type rife animation controller now let's go back and continue initializing our controller variables so remember we talked about the importance of naming your animations thoughtfully inside of the rive editor well this is where this comes into play as a first positional parameter of the one shot animation constructor we need to provide the name of the animation that it will control so for this previous button our animation is named on prev and we're also going to say the auto play parameter to false because we don't want the animation to play on page load and only want it to play when we press the previous track button now let's initialize the next controller as well so this one is called next button controller and it's also going to be a one-shot animation here our animation is called on next and we're also going to say the autoplay parameter to false let's add a semicolon over here so even though we're not using it here you can define functions that will run at the start and at the end of these animations using the onstop and onstart parameters of the one-shot animation constructor now we've completed our controller setup so let's go ahead and add the animations into our page let's head down to where we have our column and then below this container let's add a size box for spacing let's give it a height of 60. then below the size box we're going to add a row give this row a main axis alignment of main axis alignment dot center and to this row we're going to be providing our player controls so let's say children and then here we're going to be adding some gesture detectors because we want to be able to interact with these elements we're going to add so let's add the first one now and we will be specifying the on tap down function later so for now though let's add an empty function here just as a placeholder and then below this as a child of the gesture detector we're going to add a size box because that is how we're going to size our animated elements for the size box we're going to give a height of 115 and a width of 115 as well all right and as a child of the size box we're going to use our familiar drive animation dot assets and then here like before we're going to provide the path to our animation file so for this one it's going to be assets slash prev track button dot riv and you can already see it appearing on the screen right now awesome now we want to be able to control this animation so we need to provide our controller here we're going to use the controllers parameter and it need it takes in a list of controllers we're just going to provide our one controller here so it's going to be prev button controller like so awesome and now let's add the other button as well it's going to be really similar to this other than the file name and the controller name so we can just copy this over and here change these prev to next as well as this one and you can see the second button is here as well now we have almost everything set up we just want to be able to display the animation when the gesture detector is tapped so let's define a separate function for that so let's head up to where we define our variables and then below them we can add our function so it's going to return void and we're going to call it play track change animation we're going to use one function for both buttons so we're going to need to pass in the controller which we want to work with so we're going to say rive animation controller and we're going to call this parameter controller all right so now first thing we want to do is check to make sure that the animation is not currently playing we're going to do that by saying if controller dot is active equals false so as long as it's not active we're going to set it to active so controller dot is active equals true so now we can go ahead and call this function from inside our on tab down parameters of the gesture detectors so let's delete this and then call this function here play play try change animation and actually jump down a little bit we'll come back to this one in a sec but here we're going to pass in the controller for this animated element which is going to be the next button controller and then we'll do the same thing for the one above so here we're going to call this function again play track change animation and here we're going to pass in this preview button controller awesome now you can save this and hot reload the app and let's see this in action actually let's restart the app and now when we click on the previous track button you can see it's animated and the next track button does the exact same thing amazing this is working flawlessly now we're going to really take things up a notch by adding the most complex animation of this tutorial one that uses a state machine we are now going to work on adding the play pause button to our music player the animation we created for this uses a state machine to combine two separate animations as you can see we're inside the arrive editor now because before we add this element to our project we're gonna take a look at how the state machine is set up to have a better understanding of it here we can see that we have two animations on play and on pause and one state machine inside the state machine we have one boolean input is playing when the animation loads it will be in the entry state not playing any animations and just displaying the play symbol on this button over here when we set the is playing input to true we're going to see the on play animation play that will then leave our state machine in the on play state and the symbol now will be a pause symbol from this state we want to be able to pause our music player and display the on pause animation so when we set the is playing input to false again from this point we're going to see the on pause animation play out now here's something we haven't seen when we come to the end of the on pause animation the button will be displaying the play symbol again and from here we want to be able to press play inside of our music player and see the on play animation again essentially we want to be able to switch back and forth between the on play and on pause animations this is why we have this arrow over here pointing back at the on play state so in our simple live walkthrough in the very beginning we only created forward transitions but you can also create backward transitions going from the current state which here is the onpause date to the previous state which here would be the on play state let's reset the state machine and just kind of run this whole thing through once to have a good understanding of it so let's press play and you can see we're in the entry state we set this to true the on play animation plays we set this to false the on pause animation plays and then when we set it to true again the on play animation plays once more and then if we set it to false one more time the on pause animation plays and we can keep doing this all day now that we know how this works and have a good understanding of it let's add this animated button into our app adding a state machine animation into our app will require a series of steps and is quite different from what we did previously so let's take this one step at a time first we need to load a rive file for this animation in a form of byte data so let's go up to our init state and then after these controllers over here we're going to say root bundle and we need to import this root bundle from flutterservices.dart and here we're going to say dot load to this load method we're going to provide the path to our rive file which is going to be assets slash play pause button.riv and this load method returns a future with some byte data which is what we need so we're going to save that then we're going to rename this value to data and then we're going to change this to a block body because we're going to be doing a bunch of stuff in here and the first thing we need to do is we need to create a rive file object from this byte data so we're going to do that and store it inside a final variable we're going to call file and then you say write file dot import and here this expects us to pass in some byte data so we're going to pass in this data object over here awesome the next thing we need to do is locate the main artboard inside of this file over here and save it in its own variable so let's do that i'm going to say final artboard and then we're going to say file dot main artboard so we're getting the main artwork from this file over here great now we need to create a controller for the state machine so we're going to add that into a variable of its own call it controller here we're going to say state machine controller dot from artboard and let's just format this a little bit at least okay and here we're actually this was auto populated but our variable is called artboard so this works so we need to pass in an artboard as the first parameter and then here we need to pass in the name of our state machine so in our rive file we call the state machine play pause button so that works great format it and save it now for the next steps we need to use this state machine controller we just created but it is possible for this controller variable to end up as null this could happen if for example the name that we provided over here is incorrect and therefore when this object is being created it cannot find the matching state machine with that name so for the next steps first we need to check to make sure that this variable is not null so let's do that using an if statement so if controller does not equal to null then we can add some code and do some stuff in here before we add anything in here though we still need to do one more thing we need to go outside of the init state and add two uninitialized variables one for the boolean input that we have in our state machine and one for the animations artboard so let's do that we can do that below these so first one is going to be of type smi input and then you can also specify what kind of an input it's going to be so ours is a value bool and it could be nullable so we're going to leave that as though and we're going to call it play button input now let's create a variable for our artboard it's going to be of type artboard it's also going to be nullable and we're going to call it play button artboard awesome now let's go back down to the if statement we just created over here and the first thing we're gonna do is we need to pass in this state machine controller into this artboard by saying artboard dot add controller and then here we're gonna pass in this controller like so then we can use the state machine controller this one over here to find the boolean input we created in our rive file and initialize the play button input we created over here with it so let's do just that so we're going to say play button input equals to controller which is this controller over here dot find input and here we need to provide our input name so we defined it as is playing amazing we are almost done with this part the last thing we need to do is initialize our play artboard play button artboard variable over here so let's see what we've done so far we found the artboard inside of this drive file we created then we loaded the artboard over here with the state machine controller so now that our artboard is loaded with the controller we can use set state and initialize the variable with this artboard okay let's go down here and then after this if statement we're going to do just that so we're going to say set state and then we can make this into an arrow function and say play button artboard equals artboard amazing that was quite a bit of work but now we're good to go ahead and add the button into our widget tree before we can add the button we need to account for one pesky little error when the page initially loads the build method will run before the play button artboard variable is initialized if this isn't handled properly it will cause an error notifying us that a null check operator was used on a null value to prevent this from happening we're going to do the following let's head down to where we have our size box and row and in between we're going to use a ternary operator to say play button artboard if it is equal to null we're going to display a size box and if it is not equal to null we're going to display the rest of our ui amazing now we can finally add one more gesture detector to our row over here so let's head down here this is the first one so these are the two buttons these two buttons over here and we want our play pause button to be in between them so we're going to add a gesture detector right here then detector and here we're going to give it a on tap down empty function for now because we're going to create this function in a little while and add a comma here awesome now as a child we're once again going to add a size box of height 125 and width 125 because we want it to be a little bit bigger than our other two buttons and here as a child of our size box we're not going to add the drive animation.asset anymore and instead we're going to use arrive widgets here we're going to provide our artboard variable that we created so play button artboard and we're also going to give it a oops oh i see what's going on here so we also need to add a bang operator here because we have already covered the possibility that this will be null this is a nullable variable so this was telling me that you cannot add a nullable variable in here but since we already covered for that possibility we know it won't be null when we reach this so we can safely add this bang operator here all right cool and now let's also give it a fit of box fit dot fit height amazing give this a save and let's also give our app a restart so we can see everything properly amazing now you can see we've got three buttons over here and it is looking great so next we're gonna set up the logic for controlling this animation so let's go up to the top and create a separate function for controlling this button animation let's go up above here and we can add it below this function so this function is also going to return void and we're going to call it play pause button animation we don't need to pass anything into this function now this animation depends on the state of our state machine input so we're going to use the play button input variable to set up the logic here so if the input value is false and if the animation is currently not playing we want to set the input value to true which will then if you remember caused the on play animation to run so let's set that up let's say if underscore play button input and it's novel so we're going to use the null safe operator dot value is equal to false and play button input dot controller dot is active is equal to false then oops that was an unnecessary comma all right so if the value is set to false and if the animation is currently not active in that case we want to set the input value to true so we're going to say again play button input dot value is equal to true amazing and then if this ends up equating to false then we're going to do a different check so we're going to say else if play button input dot value is equal to true and the play button input controller that is active is equal to false in this case we want to set the play button input value to false so if the input value is true and the animation is currently not playing we want to set the input value to false and this will cause the on pause animation to play amazing so we're actually all set here so let's add this function call to our gesture detector so let's head down to over here and now we can call that function from here so play pause button animation great let's hop reload the app and there you go we press play now we're in the on play state and then we can press pause and now we're back to our previous animation and we can just keep doing this awesome everything works just as intended now let's add the final animated element to this page since what we have here isn't a real music player and doesn't actually play music we are instead going to add an animated element to represent this functionality we're going to add a looping animation of a sound wave that will play and pause depending on the state of our play pause button so first let's create a late variable for this animations controller up at the top you can create it right below these two controllers here so late drive animation controller and we're going to call it sound wave controller now let's move over to init state and initialize this controller variable so we're going to do that here sound wave controller now for this animation we're going to use the simple animation class to create the controller object we're not using the one shot animation class because this animation plays in a loop so let's do just that we're going to say simple animation and then here we're going to pass in the animation name which is looping animation and we're going to set the autoplay to false because we don't want it to play on page load and add a semicolon here great now let's go and add the animated widget into our page so let's scroll down and then this is our final gesture detector this is the row and we're going to add it below this row over here so first i'm going to add a size box with a height of 40 for some spacing then below the size box we're going to add a container we're going to make it a height of a hundred and width of four hundred and now here as a child we're going to use our familiar rive animation.asset and pass in the path to our animation file so assets slash soundwave.riv we are going to give it a fit of box fit dot contain and we're going to pass in our controller to the controllers list so it's going to be the sound wave controller over here amazing and again we need to restart the app here and there you see it so you see the element over here and since the autoplay is set to false nothing's happening so next let's set up the logic for activating and then pausing this animation so let's head up to the top where we have all of the other functions that control our animations and add the one for the sound wave here as well so it's going to return void and essentially what we wanted to do is we wanted to toggle the active state back and forth for this animation so we're going to call it toggle wave animation and here we're going to use set state to toggle that is active property of the sound wave controller so let's say set state actually we can make that into an arrow function as well and we're going to say sound wave controller that is active equals to explanation mark underscore sound wave controller dot is active great let's go back out of this a little bit so as you can see here this is just going to toggle whatever this is active property is equal to awesome now we want the playing and the pausing of the sound wave animation to align with the state of our play pause button so we're going to call this function we just created from within the play pause button animation function so let's do just that this is that function right here and when we toggle the input value we also want to toggle our wave animation so we're going to call this function here and then over here we want to do the same thing amazing now let's give it a save so let's review what's happening here when the page loads the sound wave animation will not be active then when we press the play on the play pause button it will activate the sound wave animation by toggling the as active property on its controller then when we press pause on the play pause button it will toggle that property again pausing the sound wave animation so let's test all of this out right now let's give our app a restart and here's our radio splash animation and now everything is loaded here so let's once again check these buttons they're working great and then let's press this play button and as you can see this animation runs and also this looping animation starts as well so let's press pause this animation happens and this animation is paused amazing congratulations it's a wrap all of our animations are fully implemented and functioning just as we want you should now have enough knowledge to start creating and adding beautiful and practical animations into your apps you should also have the fundamental knowledge required to keep growing and advancing your skills to go through this tutorial at your own pace once again and to get all of the code check out the written tutorial available from the link in the description and if you are serious about becoming a great flutter developer who can build real apps for clients or at a job go to flutter.education to get the top curated flutter news and resources aimed at improving your app development career over there you can also subscribe to the mailing list to get the best flutter resources delivered weekly right into your inbox and if you don't want to miss more tutorials like this be sure to subscribe to this channel and join the notification squad by hitting the bell button to make sure you grow your flutter skills because here at recep coder we are determined to provide you with the best tutorials and resources so that you will become an in-demand flutter developer like the video if it helped you leave a comment and see you in the next one [Music] you

Channel: Reso Coder

Views: 10,570

Keywords: resocoder, tutorial, programming, code, programming tutorial, flutter, flutter tutorial, rive, flutter rive, flare, flutter flare animation, flutter flare tutorial, flutter rive animation, flutter rive tutorial, flutter and rive

Id: xV22lglBnig

Length: 60min 44sec (3644 seconds)

Published: Fri Aug 27 2021