Keep in mind that, this article could change in the future, for package updates.
Animation is an advantage in the apps we create, obtaining a great impact on users who use the app, one of the packages that allows us to use animations made in Flare, is flare_splash_screen, which shows our first presentation screen.
For this, once our file downloaded from Flare in Json is obtained, for use in our Flutter project, we save it in the folder we want for use,
and it’s important to find the category “animations”, which will help us use our Flare package:
From these images we can obtain what is the name of the animation in Flare, duration of the animation, in which frame the animation begins, and in which frame it ends, we will use this to create a widget in our Flutter project, like the following:
As you can see in the image we start from the home property of MaterialApp to point to our welcome widget, in this we use a splashScreen.
We use the SplashScreen.callback, to be able to go to the next screen, once the animation has been successfully completed.
- Name: specify the path where our flare file.
- onSuccess: This is triggered when the animation ends.
- onError: It allows us to control the error.
- height: allows us to control the height of our animation, this also depends on the size of the artboard.
- startAnimation: start of the animation frame.
- endAnimation: end of the animation frame.
- loopAnimation: It is necessary to name what animation the loop is going to do, in this case ‘untitled’.
- backgroundColor: We can control the color background of the animation.
- until: It allows us to control the duration of our animation on the screen.
This is the final result of what it would look like:
With this result, we can already have our splash screen.
I’d like to mention the creator @SamadiPour, of this animation in Flare to be able to show the example of the splash screen.
References:
