As the demand for applications continues to rise, it's essential to focus on boosting both user engagement and user experience. Incorporating animations can significantly contribute to this by not only improving user interaction but also enhancing brand recognition through memorable visual effects.
Sure! Here's a natural rephrasing of the provided text: "In Flutter development, animations play a crucial role in fulfilling various app feature requirements. In this tutorial, I'll guide you on how to incorporate a custom animated splash screen into your Flutter apps using LottieFiles."
If you're just starting with Flutter, be sure to read Flutter’s Official Documentation on Getting Started with Flutter. Additionally, you might enjoy this article on resources to help you dive into Flutter 😃.
Lottie Files
LottieFiles is a site that provides lightweight animations for use in websites, apps, advertisements, and documents.
By utilizing the stunning animations available from LottieFiles, you can create eye-catching splash screens for your Flutter apps.
Getting Started
1. Step One.
We will be utilizing the Lottie for Flutter library to interpret Adobe Effects files exported in JSON format and display them natively on mobile platforms—covering both Android and iOS.
i). Create a new Flutter Demo App named lottie_flutter (feel free to use any name you like).
$ flutter create lottie_flutterii). Delete the generated code, then insert the following code into your main.dart file:
iii). Add the Package
Run this command with Flutter
$ flutter pub add lottieOr directly add the package to your dependencies with
dependencies:
lottie: ^3.1.2Next, execute the flutter pub get command to refresh your dependencies. (Don't forget to always use the latest package version from pub.dev)).
iv). Import the Package.
"In our Dart code, we'll incorporate and utilize the package with:"
import 'package:lottie/lottie.dart';v). Create a new Splash Screen page.
In our lottie_flutter demo app, you'll need to create a new splash screen file where we will integrate the splash effect using Lottie animations. Let's call this file splash_screen.dart. Next, insert the code below, and we'll continue to develop it as we progress.
2. Step Two.
You can incorporate Lottie animation JSON into your app through several methods.
- You can access your animation JSON files directly from a remote URL by using
Lottie.network(). - Utilizing
Lottie.asset()-> Place your animation JSON file in an asset folder and integrate it into your App by pointing to its asset path.
"1. Incorporating the Animation JSON file directly using a network URL."
Using this approach, you can directly integrate the link to the Lottie animation JSON network URL into your Flutter App with Lottie.network()..
On your Lottie dashboard, look for an animation that you like. For this example, I’ll use the ‘rocket’ keyword. Choose an animation and, if you like, you can use the edit icon in your Lottie editor to adjust the color theme.
Next, in the Animation details, pick the Asset Link & embed option from the tab to create a link.
In our demo application, we'll utilize the JSON link copied earlier.
On the splash_screen.dart page we set up earlier for our lottie_flutter demo application, incorporate the following code snippet utilizing Lottie.network(). This function lets us leverage a remote animation URL that we have previously copied from the Lottie dashboard.
Feel free to adjust the code to match your specific requirements. When you execute this code, it will produce the following outcome:
2. Adding the Animation JSON to your Assets folder.
"Please be aware that the next parts of this guide will primarily concentrate on incorporating animation JSON files into the assets folder of your Flutter app."
In this step, you'll need to download a JSON animation file from Lottie's dashboard. After that, you'll create an asset folder in your Flutter App to use this file.
Next, go to LottieFiles to choose the sample animation we need. For this illustration, I'll be selecting a login animation. Simply type "login" in the search bar and select your preferred login animation.
Should you wish, you also have the option to tailor the chosen animation to your liking.
The animation is available for download as a JSON file.
3. Step Three
Returning now to our lottie_files Flutter demo app,
In the main directory of your project, add an /assets folder.
Inside the assets directory, make a new folder specifically for animations and label it animations — (You can choose any name you like).
Next, take the login Animation JSON file you just downloaded and drag it into the animations folder.
4. Step Four
In the pubspec.yaml file, remove the comment from the asset line of code and insert the path to your newly added animation file. — Remember, yaml is case-sensitive, so double-check to ensure your syntax is accurate. The path should now appear as assets/animations/..
You can keep it like this if you intend to add more JSON files to your animations folder without having to list each file individually, as this approach will incorporate all files in the animations/ directory.
After downloading the preferred animation from LottieFiles and incorporating it into our project, the next step is the actual implementation.
5. Step Five
In the lottie_flutter project, we need to update our splash_screen.dart file to make use of Lottie.asset(), providing the path to the animation JSON file located in our assets folder.
Tip: Feel free to include additional animation properties as you like. Utilize AnimationController to tailor the motion to your specific requirements.
Here's how your splash_screen.dart page code should appear with this updated implementation:
6. Step Six
Next, we aim for the animated splash to show for a few seconds before moving to the HomeScreen page.
To achieve this, we'll create a method that displays the splash screen for a specific amount of time before redirecting to the HomeScreen page.
Next, introduce a method to Navigate to HomeScreenPage() after the splash screen has finished loading.
With these new methods incorporated, the complete code for the splash_screen.dart page would now look like this:
This translates to this Splash display:
7. Step 7
Next, let's set up a straightforward HomeScreen Page to verify the navigation after the splash screen finishes loading.
Start by creating a new file named home_screen.dart and then insert the following code into it:
Final Step.
With all the pieces of code assembled, we'll proceed with a comprehensive end-to-end test to verify the changes.
Here's the complete code example from GitHub.
Your app should incorporate the modifications shown in this demo app.
Other resources to check:
- https://www.youtube.com/watch?v=3sIVBs6v5FE&ab_channel=HussainMustafa
- https://pub.dev/packages/lottie/example
Conclusion
In this article, you've discovered how to download and utilize Lottie Files animations to design stunning animated splash screens for your Flutter App. With this knowledge, you can unleash your creativity with various animations to craft a sleek splash screen for your Flutter Apps.
Thank you 😍
Happy Fluttering 🙌.
