Flutter: Explosion Animation for Image 💥

Flutter is a framework from Google which allows you to use Dart language to write cross-platform applications. This means that your apps will run on both iOS and Android devices.

Flutter packages are nothing but the dart packages written using Flutter and Dart SDKs independent of native platforms such as Android and iOS.

If you are building any Flutter application and if you need to show some animation while deleting some image or removing it from that page then this package can make your work with just one line of code. Isn’t it interesting?

So, in this blog, I am going to show you the implementation of this beautiful animation package for Flutter.

After this blog, you will be able to make such a beautiful animation

Okay then, Let’s Code:

Let’s start by creating a new package in Android Studio

Creating Flutter Package in Android Studio

Now after creating a package, go to /lib/explode_view.dart file. Now initially, we will start by creating class ExplodeView which takes in the imagePath and the position of the image in the constructor.

Now coming to the implementation of the _ExplodeViewState which maintains the state of the class extending the StatefulWidget with the TickerProviderStateMixin.

In this class, I have initialized the StreamController<Color> class which helps in rebuilding the UI for every event caused through its StreamBuilder class. Then I have initialized the Animation Controller for the shaking animation of the image before its explode.

In the build, I have implemented the condition i.e. if the image is to be present then display it using the Image.asset which is implemented in the GestureDetector class which will be used for knowing when to show the explode animation. It’s been implemented inside the StreamBuilder class which initializes its data for the colors of the particles. And if the image is pressed for a long time then we start the particle animation for a list of particles.

Now, we will jump to the implementation of the Particle class which creates a single particle animation.

Firstly defining the variables and then initializing the class with the constructor which takes particular id, color, and position of the particle to display. Then, I initialized the AnimationController for the translation of the image and also set the Tween objects for translation in the positive and negative x and y axes. Then implementing the Tween object for setting the opacity of particle during its animation and also implemented it for the particle size.

Now coming to the method for starting the particle animation which returns the animatedBuilder Widget with setting the above-described animationController as the animation type. This animatedBuilder returns the translation using the Transform class which even includes the FadeTransition Widget for setting the opacity of particle as the animation proceeds.

I have implemented the above translate method four times to move particles in different directions using different values in the offset field and have also created the particle using a Box with the shape of a circle and variable height and width according to above defined Tween object.

This completes the implementation of the Particle class and now proceeding to get colors from the image.

This code gets the color of the pixel at the defined position from the image in which I have used different methods for loading and setting the bytes of the image which can be referenced from my GitHub code described below.

Now coming to the final animation of scattering particles when we long press on the image the following method is executed.

Here I have simply taken the colors from the getPixel() method defined above using the position of the image got from the RenderBox class. I have taken colors from three horizontal lines on the image with the random offsets on the same line which got me most colors from the image. Then, I have created the particles using the Particle class at different positions using appropriate values of the parameters. This was executed after the delay of 3.5 seconds in which there would be the shaking of the image.

Shaking is simply implemented by using the Matrix4.translation() method which translated image speedily using different offsets from the _shakeImage method shown below

Finally, after the shaking of the image and creation of the particles, the image is disappeared and the startParticleAnimation method is called as shown above in the blog. Hooray, this completes our library implementation of exploding the images in Flutter.

After this implementation and importing it in your code, it's just calling a simple one line

You can use the explode_view package in your Flutter App following this installation guide.

Package source code explode-view
Package example source code
Published package explode_view 1.0.2 in pub.dev