Rive Animations in Flutter

driveways are very useful animation tool that can create beautiful animations and we can add this in our flatter applications we can create our own animation using the drive editor or can use the already existing animations in the right Community therefore we will use the already existing animations and copy its URL do you want to have your flutter app website or backend server completely developed in a high professional manner instead of developing it on your own then simply go to heyflatter.com app and we will develop this app for you now in our flatter up we use the rhyme animation widget that loads the animation from an internet URL and for using the ripe animation we need to add the right package and postpick file as you can see we have loaded the drive animation in our application we can even load a drive animation from our assets for that first of all we need to download arrive animation file and paste it in our assets folder and add our assets folder here in pop spec file and as you can can see we have an animation that loads from our Assets Now now we will play an animation with State machine therefore we can use the famous flatter Dash animation which we have downloaded already and have it in our assets file now in the body we check if the drive output is null we show nothing else we show our right widget therefore we need to declare the output here after that in the init method we need to load the animation from the assets then inside the try cache load the right file from the binary data which we are getting it from our animation the artboard is the root of the animation which we need to extract it from the right file after that we create our state Machine controller which takes our artboard and state machine name which is burped for our animation then if the controller is not null we will add it to the artboard and finally set the artboard to the top level outboard variable and here is our famous Drive animation which we have loaded in our application now we create a switch widget to make the animation dance or not therefore we get our dance value using our controller with its state machine name and now we need to declare the S dance variable here in the above after that we toggling the animation dance using the switch widget therefore inside the method we set the new value to our s dance value now if we trigger the switch on you can see it is dancing and if we switch it off it stops dancing now we create a button to make our cute bird lookup then first we need to get the state machine name of our animation for looking up using the find SMI method therefore we need to declare our age lookup variable here after that in our button we set the slookup value to True whenever user clicks on it and now as you can see whenever we click on it the animation looks up [Music] foreign

Channel: HeyFlutter․com

Views: 22,985

Keywords: android, flutter animation, flutter design, flutter rive animation, flutter rive animation example, how to use rive in flutter, ios, rive animation download, rive animation examples, rive flutter change animation, rive flutter medium, rive flutter tutorial, rive vs lottie, rivecommunity, riveflutter github

Id: mEl4ad1WXps

Length: 2min 55sec (175 seconds)

Published: Wed May 31 2023