Particle Animation On User Interaction In Flutter
Animations assume a significant function in upgrading your application’s general user experience from the visual input, motion, and up to the animations you can actually envision!. Each mobile developer wishes to include animations in their application; however, they are unsuccessful because there is a ton of complexity and many things a developer needs to learn before including animations. Much like some other items coordinated into an application, animations must be a functional element instead of only a regular stylistic theme.
Flutter has an awesome Animation library that permits you to make complex animations that can run continuously without any problem. Utilizing the traditional frameworks, you would typically need to compose complex animation controllers and designs to set the timings, tweens, and advances.
In this article, we will explore Particle Animation On User Interaction In Flutter. We will also implement a demo of particle animation using the simple_animations package in your flutter applications.
simple_animations | Flutter Package
Simple Animation is a powerful framework to create beautiful custom animations in no time. 💪 Fully tested 📝 well…pub.dev
Table Of Contents::
Introduction
Essentially, it’s some modest “whack-a-square” execution in Flutter. The virtual square shows up for a short duration at six different places. At the point when you click one square, it will part into different particles. After an arbitrary time, they respawn once more. So essentially, it’s simply a straightforward response game.
Demo Module ::
Implementation:
Step 1: Add the dependencies
Add dependencies to pubspec — yaml file.
dependencies:
simple_animations: ^latest version
Step 2: Import
import 'package:simple_animations/simple_animations.dart';
import 'package:sa_v1_migration/sa_v1_migration.dart';
Step 3: Run flutter packages get in the root directory of your app.
Step 4: Enable AndriodX
Add this to your gradle.properties file:
org.gradle.jvmargs=-Xmx1536M
android.enableR8=true
android.useAndroidX=true
android.enableJetifier=true
How to implement code in dart file :
You need to implement it in your code respectively:
Create a new dart file called square_animation.dart inside the lib folder.
For the square, we utilize a Container wrapped into a GestureDetector to route the client taps into a _hitSquare() strategy. This square container is inside a Stack alongside the particles.
We should begin by indicating to you a few codes of the square widget:
class Square extends StatefulWidget {
@override
_SquareState createState() => _SquareState();
}
class _SquareState extends State<Square> {
final List<SquareParticle> particles = [];
bool _squaresVisible = false;
@override
Widget build(BuildContext context) {
return Container(
width: 70,
height: 70,
child: _buildSquare(),
);
}
Rendering _buildSquare() {
return Rendering(
onTick: (time) => _manageParticleLife(time),
builder: (context, time) {
return Stack(
overflow: Overflow.visible,
children: [
if (_squaresVisible)
GestureDetector(onTap: () => _hitSquare(time),
child: _square()),
...particles.map((it) => it.buildWidget(time))
],
);
},
);
}
Widget _square() {
return Container(
decoration: BoxDecoration(
color: Colors.redAccent, shape: BoxShape.rectangle ),
);
}
_hitSquare(Duration time) {
_setSquareVisible(false);
Iterable.generate(50).forEach((i) => particles.add(SquareParticle(time)));
}
_manageParticleLife(Duration time) {
particles.removeWhere((particle) {
return particle.progress.progress(time) == 1;
});
}
void _setSquareVisible(bool visible) {
setState(() {
_squaresVisible = visible;
});
}
@override
void setState(fn) {
if (mounted) {
super.setState(fn);
}
}
}
Inside the_hitSquare() the strategy, we hide the square container and generate 50 particles of SquareParticle. This class likewise has a buildWidget() strategy to assemble a little square particle.
Everything is going on inside a Rendering widget. It takes a boundary onTickthat we use to deal with the particle life cycle. In our _manageParticleLife() strategy, we eliminate all particles with a finished animation.
Particle Animation
Our particle animation begins by overlaying the first square container. After some time, the particle container reduces to zero while flying an irregular way.
Create a new dart file called square_particle.dart inside the lib folder.
We can implement that behavior into our SquareParticle class:
class SquareParticle {
Animatable tween;
AnimationProgress progress;
SquareParticle(Duration time) {
final random = Random();
final x = (100 + 200) * random.nextDouble() *
(random.nextBool() ? 1 : -1);
final y = (100 + 200) * random.nextDouble() *
(random.nextBool() ? 1 : -1);
tween = MultiTrackTween([
Track("x").add(Duration(seconds: 1),
Tween(begin: 0.0, end: x)),
Track("y").add(Duration(seconds: 1),
Tween(begin: 0.0, end: y)),
Track("scale").add(Duration(seconds: 1),
Tween(begin: 1.0, end: 0.0))
]);
progress = AnimationProgress(
startTime: time, duration:
Duration(milliseconds: 900));
}
buildWidget(Duration time) {
final animation = tween.transform(
progress.progress(time));
return Positioned(
left: animation["x"],
top: animation["y"],
child: Transform.scale(
scale: animation["scale"],
child: Container(
width: 70,
height: 70,
decoration: BoxDecoration(
color: Colors.redAccent,
shape: BoxShape.rectangle
),
),
),
);
}
}
On particle creation, we process an irregular objective position and store this data into a tween. We use MultiTrackTween (originating from Basic Animations) as we need to tween three different properties at once.
At that point, we make an AnimationProgress (originating from Basic Animations) that monitors our animation progress. We need to take care of him at the current time.
Animated tween values and the advancement are utilizing inside the buildWidget() strategy to draw a positioned and scaled Container.
Code File
https://gist.github.com/ShaiqAhmedkhan/f92c29b8343a4b18218b45a996081b9f#file-square_animation-dart
At long last, we have pleasant animation utilizing a particle system on user interaction. You will see a full code on a GitHub, and the below video shows how particle animation on user interaction will work in your flutter applications.
Conclusion :
In the article, I have explained the structure of Particle Animation On User Interaction; you can modify this code according to your choice. This was a small introduction to Particle Animation On User Interaction from my side, and it’s working using Flutter.
I hope this blog will provide you with sufficient information in Trying up Particle Animation On User Interaction in your flutter projects. This is a demo program to use a simple animation package in a flutter and show how particle animation on user interaction will work in your flutter applications, So please try it.
❤ ❤ Thanks for reading this article ❤❤
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
find the source code of the Flutter Particle Animation Demo:
flutter-devs/flutter_particle_animation_demo
A new Flutter application. This project is a starting point for a Flutter application. A few resources to get you…github.com
Feel free to connect with us:
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
