Flutter – Loading Animation Widget
In every mobile application, there is a loading animation with different colors and styles, basically, we use the loading animation when we are waiting for something. Like if we are fetching the data from the database then we have to wait for some time until the data is not fetched. So in this duration, we will show the loading animation or loading bars. We also use the loading animation during the application initialization. This will improve the user experience. So, In this article, we create an amazing loading animation for our applications. A sample video is given below to get an idea about what we are going to do in this article.
Step by Step Implementation
Step 1: Create a New Project in Android Studio or in the VSCode as your IDE
To set up Flutter Development on Android Studio please refer to Android Studio Setup for Flutter Development, and then create a new project in Android Studio please refer to Creating a Simple Application in Flutter.
Step 2: Installation of package
Install the package into the pubspec.yaml file that you will find in the root directory of the project.
This will add a line like this to your package’s pubspec.yaml (and run an implicit flutter pub get):
Step 3: Import the package
All loading animation APIs are the same straight forward. There is a static method for each animation inside LoadingAnimationWidget class, which returns the Object of that animation. Both size and color are required some animations need more than one color. You can use the class followed by the function to use the individual loading animations.
– Loading animation with one color with simple style.
– Loading animation with two colors with advance style.
List of Animations
Note: You have to give both colors otherwise it will raise the error.
Please Login to comment...