Interactive pull-to-refresh animation tutorial: Create magic with Rive and Flutter

foreign we will take a look at how we can create a pool to refresh experience using arrive in the drive flutter runtime the animation that we will be incorporating is the following one so as you can see this is a filter refresh experience and as you drag down it drives the animation forward you can also let it go and it will reset but eventually if you reach a certain threshold it will trigger a new state and once you let go it will start refreshing or doing the asynchronous request to load new data or whatever the policy refresh does behind the scenes but as you can see it's a very unique experience and we will be taking a look at how we can incorporate that in this video if you are interested in how this animation sets up and how I can create something similar using the arrive editor then we have dedicated tutorials teaching you exactly how to do that in this video we'll only be taking a look at the flutter implementation and if you're completely new to the flutter runtime then I recommend taking a look at our documentation there is step-by-step instructions on how to get started with drive on flutter Additionally you will need to use the arrive flutter package and additionally it will also make use of the easy refresh package as this was what will allow us to quickly create the Apple to refresh experience and add arrive animations so with that said let's just jump in and get started with the actual code the first thing you'll need to do is open your password.yaml file and you'll need to include the following two dependencies Rive and easy refresh please note that they may be breaking changes in future versions if you want to follow this video exactly I suggest using these versions listed here or alternatively you can just get the final completed source code from GitHub the link will be in the description but note that we're not going to be walking through the code step by step uh at least not me typing it out instead I'm just going to explain it to you so I do recommend getting the code or the final version on GitHub once you've added those dependencies you can go over to the editor so depending on the animation that you're using you'll need to actually download it so if you go to the share button here download for runtime you can download the dot Riv file and this will allow you to include it in your flutter project I've already done that so if you've not done that you can just download it and in your flutter project you can create an assets folder and just add the right file over there then be sure in your power sector yaml file you'll need to include that file as well you can either include the specific file by specifying the name or you can include everything in the assets directory okay so let's take a look at the actual code implementation if we hop into my app you can see we have a normal material app we have some theming and we return the archery page and the auditory page consists of the entire animation or the entire view I should say so everything you see here is the archery page and the important thing within this page is this is where we use the easy refresh package and this allows us to do the multi refresh experience and as you can see it consists of a controller header on refresh and a child and I do recommend you take a look at the easy refresh documentation there's quite a lot you can do with it and a lot of customization that we won't be going into in this video but what we need for our purposes are just these configurations so let's first take a look at the child and this is the content that's going to be displayed in the main body of the screen so this will be the scrollable content and what I mean by that it's basically everything you see over here and as we drag you can see that all of that scrollable and if you are familiar with flutzer you will be familiar with the custom scroll View and this allows you to provide a variety of different slivers so that you can configure a more unique scroll experience instead of using a normal list Builder what do I mean by that I mean that as you can see um our scroll experience consists of a sliver app bar and this header locator that we'll get into in a moment and then a sliver list and this level list is a boulder and within this Builder we return a Skeleton item and the Skeleton item is this UI configuration here it's just for UI purposes to show a scrollable list item and um the custom scroll view allows you to actually have different kinds of scrollable widgets inside and nested it's a more complex way of doing scrolling and how the refresh package make use of this easy refresh they allow you to inject this header locator dot sliver and as you can see it's between the sliver app bar and the sliver list and as we scroll down you can see that the this is the location that we will be doing on arrive animation or whatever you were to use in the easy refresh package as an example if we were to take this out and put it at the bottom now if we scroll down you can see the arrive animation is actually at the bottom so that's not where we wanted we wanted over here so there's some unique ways that you can probably use this if you wanted to um but that is the overview for the body next up you can see we have this on refresh and this on refresh will be triggered once you hit the refresh threshold and you let go so the refresh will be called right then and we're just using this to drive the controller forward and to eventually call Finish Refresh on the controller so this is just a simulation for what should look like if you were to actually load real data and then the controller over here this is the easy refresh controller and again there's a variety of different customizations you can do with this and this is what drives the easy refresh animation and it also allows you to determine what the current status is of the refresh so for the overview out of the way let's jump into the actual implementation with derive animation as you can see we have this header and if we jump to this widget it's called archery header and it extends a header class and you'll need to do this as the expected type is a header type in the widgets and what this allows is it gives you the indicator states that states and this is needed in our example as we'll see in a moment so most of these are just initializations for the header class and you can again take a look at the easy refresh documentation but as I mentioned there's a variety of different customizations you can do these are just the configurations I chose for this example finally if we take a look at the archery indicator this is where the arrive animation is and you can see this is a stateful widget and we get the indicator States and this indicator States is provided by this build method over here and we use that state in a number of different ways we use it to get the offsets of the pool so as you start pulling down the offset increases and also the current mode of this uh the pulsory refresh for example if we pull and reach certain conditions demo changes and I think the best way to actually um demo that is just to do a print over here so as you can see we have this listener called on mode change and the on mode change is um being triggered each time it denotes a fire of these states changes so this indicates a state it has this Notifier and what we want to do is add a listener to that so each time this listener changes we're just going to print the value of the mode so let's see what that looks like as you can see once we start dragging it says indicator mode drag and eventually you'll see it's armed once it reaches the arm state that is when we actually change the drive animation and then once we let go it's ready processing processed done and then inactive so those are the variety of different states you can use and you can use these states to drive for your animation or whatever you want it to do and that is exactly what we do for the arrive animation and we do that within this switch over here so as we reach different states of the mode we drive our arrive animations State Machine controller and before we delve more into how this drive animation set Machine controller is set up and used let's quickly go back to arrive animation and we'll need to explore how this works and again if you want to watch the video on how this is configured I do recommend you write that video this is just going to be a quick overview if we take a look at the anime Tab and we press play on the main artboard we'll play it and you'll see we have this two inputs we have a pool and an advance and for the pool as you start increasing that value it will arrange eventually go to 100 and once it's more than 100 it will be ready and now if we press Advance it will go into the refreshing States and in advance again it will be in the done State and that's the end of the animation so as you can see that's how this particular animation is set up and that is what we'll need to simulate in our arrive runtime so going back to the code what we'll need to do is we'll need to initialize arrive animation and get access to the state Machine controller so let's see what happens in the bulb um before we look at this we're going to ignore this for now and what we'll do instead is just take a look at the arrive animation over here so ignore the rest we're going to talk about that in a moment as you can see to initialize or to create Drive animation what we do is we call arrive animation.asset and there's actually a number of different ways you can instantiate this if you say dot assets using that factory you just provide the asset location and then within the onnet this is a callback that will give you access to the artboard and the artboard that you will get access to is dependent on the default artboard of the file or you can specify the name of the artboard so as an example this is the bullseye artboard which is the default so we don't need to specify it but we can and that seems like it's spelled correctly so this should still be the exact same let's see if it works yeah it's still the same and we'll get access to this artboard in the online callback and with in this on internet we can start creating our side Machine controller so we'll use a stud Machine controller from artboard and we specify the artboard and then we specify the controller's name and as you can see the name for this state Machine controller is called number simulation and we specify that name over there then we say controller is active equals false and that is because we don't want the animation playing when it's not ready it's technically this isn't needed but you can include it because yeah I initially included this but it's not really needed and we'll see why in a moment but what this means is the animation is currently paused and then we're just doing a safety check if the controller is null we just throw an exception unable to initialize that Machine controller there should never be null unless you give the incorrect name over here so if we were to specify this save and actually run the animation you'll see a Frozen error unhandled exceptional exception and you can read it over there so let's just reset that and then finally we need to add the controller to the outboard and we do that by calling the add controller method so now what this means is that this controller can drive the artboard or the artboard will respect whatever you tell this controller to do as an example whether the controller is active or not and then lastly we need to get access to two inputs and these two inputs are pull and advance and as you can see we have these local state variables called pool and Advance one is an SMI number this call this is called stack machine input number State machine input trigger and a trigger is exactly that it triggers an input so a trigger and then a pool is a number value and that is is my number and if we take a look we get these values by calling find input specifying the type and then we just cast it to the correct value and here it's important to also have the correct names if we were to provide the incorrect name then this cast will fail because it's trying to cast a null value finding an input can return null so be sure these are the correct names so that is excellent now that we have the controller and we have all of these values that means we can drive our state machine through code and that's actually quite easy to do now that we've have all of the boilerplates out of the way so let's see how we do that within the build you can see that we make use of the pull SMI number and this is what drives the value from 0 to 100. and as you can see we just set the value equal to this percentage over here and what this allows us to do is just determine how much we've dragged the value in relation to our desired offsets so what do I mean by that it means that eventually once you start dragging this the value would be between 0 and 1.1 and the reason it's between 1.1 and not one is because we want it to be slightly more than 100. and that is because if we look at how this animation is configured it will only trigger the next state so when it's like the strain Loop and it's like vibrating like this if the value is more than 100 so we do want to make sure that it is at least slightly more probably doing 0.01 would also work this is going to be depends on your animation and this is just something I had to do for this particular animation but the important point is that we're setting the pull value between a value of zero and something above 100 and then finally if we take a look at this on mode change this is again where we added that listener we get access to the mode and dependence on the mode we start triggering the animation so as you can see when the mode is dragged we set the controller to be active equals to true so that means we are actually starting the animation and when it's ready we fire the animation and when it's processed we fire it again and that is just to drive it through the different states of that particular animation this would look different if your state machine is configured in a different way and previously I mentioned that this is active is technically not needed and the reason for that is because there's this additional check that I added to only make the animation visible if the offset is greater than zero and the reason I'm doing this is because if the animation is not visible so for example we haven't dragged it we don't really want to be doing any unneeded work so we don't want to be initializing at the animation and we definitely don't want to be drawing it when it's not even visible so what this visibility check does it makes sure that the animation will only become active once it should be active as an example if we were to increase this to 30 and now we drag you can see the animation is not there it's not visible but eventually it will become visible so we'll just keep it above zero and now it will be immediately visible when you drag though one thing to consider is that with this implementation as I mentioned this I have a variety of different Factory Constructors that allow you to instantiate arrive animation what this means is that the arrive file will be loaded the artboard will be retrieved and this initialization will take place every single time you do a drag like this and in this instance the animation is quite lightweight and it does it really fast and you normally shouldn't see an issue but if you wanted to be I guess a 10x engineer and you know increase the reusability of what has already been done you can pre-load your iPhone and just provide that so let's actually see how we can do that what we'll do is we'll uncomment this include the services package and in our net State we will call this method and what this method does is it loads dri file for us and eventually um after it's loaded we just create a new run file instance by importing the data that we loaded from the root bundle and then we call state state and this is a right file that can be null and what we can do now is in our build method we can say if the offset is bigger than zero and we'll say write file not equal to zero or not equal to null sorry and then instead of doing an asset we can just say direct and this requires us to actually pass in the rifle and we can add the exclamation Because we know the right file won't be null and now if we get our simulator back we'll just need to do a hot refresh oh sorry I had to restart and now it works the exact same way the only difference is is that we're not reloading the URI file each time we are instead pre-caching the arrival and just reloading the artboard and again you don't technically need to do this visibility thing you can keep it in the background and just running constantly if you wanted to but it is a slight performance uh optimization that you can implement additionally in this example if we take a look at our animation it is not configured to actually reset back to a certain state so it reaches 100 something we press advance we press Advanced and it's done how do we go back to a clean State and Michael who made this animation he would definitely be able to set it up in such a way and you would be able to too to set it up to rewind or reset this type machine back to a previous input but what you can also do is just reload the whole animation for example stop it and play it again and now it's reset and in a similar way that is what we're doing here when we are recreating the art border we are essentially essentially invalidating the old one and creating a new artboard it's a clean State and we can just start again and that is that that is how you can create an awesome pool to refresh experience using flutter and drive we have a number of other tutorials as well showing you how to do this in other platforms

Channel: Rive

Views: 4,161

Keywords:

Id: IlZpFIKOI60

Length: 21min 14sec (1274 seconds)

Published: Fri Jun 16 2023