Flutter Animation is a great concept in flutter so in this lesson we will discuss about Flutter Animations and than we will setup the Complete Animated Splash Screen in flutter.
Suggestion: Integrate Admob Ads in Flutter App
This lesson is very easy and easily understandable by beginners. Building animations in flutter Application is quite easy. So just follow some important steps and Learn Animation in Flutter. I'm starting from very basic's because some programmers are new in flutter.
In this lesson we will cover these all given topics:
- How to create flutter new Project in Android Studio
- Create new Screen in Flutter
- Animated Splash Screen in Flutter
- Flutter Android App testing on Emulator
Results After this Tutorial:
Create Flutter new Project in Android Studio:
First of all you need Flutter SDK so go to Flutter official website and get Flutter SDK. Now extract the Flutter SDK with WINRAR.
Add Flutter SDK path in Environmental Variables:
Open the Flutter SDK folder and copy the bin folder location in my case location address is E:\flutter\bin. So in your case may be it's different. After copying the flutter bin folder Location. Go to Start Menu and search for Environment Variables and in User Variable Double click on path and paste the link. Do same thing with System Variables and click on save and save it. After saving the SDK path restart your System.
Flutter Plugin Installation in Android Studio:
Now open Android Studio and go to plugins section and install Flutter plugin for Flutter App Development. This step is very important otherwise Android Studio will never allow you to create Flutter Project. After Installing the Plugin Restart Android Studio and now your Android Studio looks like this.
New Flutter Project in Android Studio:
Click on New Flutter Project and than select the Flutter SDK path keep in mind don't select bin folder just choose the flutter folder location in my case Location Address looks like E:\flutter. Again click on next and Enter project name, package name and some other necessary information than choose platforms. We know flutter supports multiple platforms. Now click on create and wait for some seconds flutter will automatically setup the Demo App for you.
Suggestion: Firebase Cloud Messaging Tutorial in Flutter
Create a new Screen in Flutter:
In the side project section you will see a folder which is labeled with 'lib'. Open this folder and write click on it than select new dart file enter Dart file name like "Splash Screen" and hit enter now you will a new dart file is created in the Lib and this file is totally empty.
Suggestions: Flutter Black Screen Issue
import 'package:flutter/material.dart';
class SplashScreen extends StatefulWidget {
const SplashScreen({super.key});
@override
State<SplashScreen> createState() => _SplashScreenState();
}
class _SplashScreenState extends State<SplashScreen> {
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: Center(
),
));
}
}
In this code we just import material .dart and than we use the State-full Widget.
and in Scaffold body we use Center Widget.
Now in the project section you will see a Pub Spec file open this file scroll down and find the dependencies section and add than add this Dependency. After adding click on Pub get option.
lottie: ^2.5.0We will use lottie animations in our app. By the way there are many different ways to create animations in flutter App but this one is very popular among all Flutter App Developers. Add dependency like this.. Visit Lottie Files Official Site or get this package from Pub.dev
Design Animated Splash Screen in Flutter:
Now time to code our Animated Splash Screen.
Open the new dart file that we created. And select all code paste this Code. Than I, will explain how actually this code work.
import 'package:flutter/material.dart';
import 'package:lottie/lottie.dart';
class splashroom extends StatefulWidget {
const splashroom({super.key});
@override
State<splashroom> createState() => _splashroomState();
}
class _splashroomState extends State<splashroom>with SingleTickerProviderStateMixin {
late final AnimationController _controller;
bool like = false;
@override
void initState() {
super.initState();
_controller = AnimationController(
duration: Duration(seconds:1),
vsync: this);
}
@override
void dispose() {
super.dispose();
_controller.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
Center(
child: GestureDetector(
onTap: (){
if(like == false){
like = true;
// Forward mean Animation will go ahead
_controller.forward();
}else{
like = false;
_controller.reverse();
}
},
child: Lottie.network(
'lottie json url'
height: 700,
width: 500,
controller: _controller,
),
)
),
],
),
);
}
}
Explanation About Flutter Animated Splash Screen Code:
1: First of all check the Center widget child in Center Widget I used Lottie animation network widget because I'm fetching Lottie animation from .JSON URL. You will get this URL on Lottie animation official website. Choose the best animation and click on generate link and than copy the .JOSN link of the animation.
2: Now paste the .JSON URL in quotation marks.
3: Than set the height and width accordingly
4: Don't Focus on controller just save the app and run your app and check the result. You will see animation is running in the middle of the screen.
5: So, your Flutter Animated Splash Screen is 100% ready. Customize the animation accordingly.
Use of Controller in Flutter Animation:
Basically we use Controller in Flutter to make different type of animations. But here in this example I'm using controller for pausing or resuming the Animation. Let's Suppose if you pressed YouTube and Facebook like button so you notice something when we clicked a celebrating animation run on YouTube like button and on Facebook like button pop up. So for these types of Animations in Flutter we use Controllers.
In this example you will see I declare one Animation Controller and one Boolean.
late final AnimationController _controller;
bool like = false;And on top I use Single Ticker Provider State Mix.
After that I called the initState method and in this method I'm using Animation Controller and set some Animation Duration and Vsync. Vsync is required parameter so you don't skip this.
On Click Play on Flutter Animation:
You noticed I'm using Gesture Detector on Lottie Animation. Because I want to run this animation when some one click on this Lottie (Like YouTube when we pressed than he show Celebrating Animation). Animation will start and after some Duration that I set in the Controller animation will paused on its default state.
So I use if else if like==false which is by default false so this condition must be true. So if like is equal to false than set like == true and _controller.forward(). Means forward the animation run the animation. Now Animation will run and pause. When user will click again on this than animation will go reverse because I set the condition if like == true than reverse the Controller animation.
So this is the basic logic behind this complete Flutter Animations.
Testing Android App on Flutter:
It's very easy to run Flutter App on any emulator just launch the emulator and than press this button to Run App. This process will take sometime it totally depends on your PC specs. So if you have low Specs PC or laptop than wait for it and be patience. By the way you can also run this app on your real Device. In the below Image you will see I have Pixel 3 Emulator. So Select your installed Emulator and Run the App.
Check the Live Demo of this App After implementing Animation. This is a very easy way to create Flutter Animations. Flutter Animation is very popular nowadays so i highly recommend you to learn Flutter Animations. Flutter Animations Skills will make your Application more Attractive. So As per my knowledge must try Flutter Animation.
0 Comments