Search packages, repositories and app categories

ducafecatFlutter ecosystem guide
Package detailsv1.0.4

explode_view

A beautiful animation library for Flutter which explodes the image into small particles. This package can be used whenever there is a need of removing the image from the screen.

pub.dev API documentation Source code
30-day downloads
40
Likes
59
Pub points
40

Install package

flutter pub add explode_view

Package Overview

Package selection guidance compiled from public package information, community data, and project usage.

ExplodeView is a Flutter animation library that creates a visually striking effect by disintegrating an image into small particles. Ideal for transitions where an image needs to be removed from the screen in a dynamic and engaging way, it enhances user experience with smooth, customizable animations. The package leverages Flutter's rendering capabilities to deliver high-performance particle effects without requiring complex manual implementation. It’s particularly useful in app interfaces involving image removal, such as swipe-to-delete or interactive photo galleries. The library is open-source and maintained by a community-driven project.

Use cases

  • Image removal transitions
  • Interactive photo galleries
  • Swipe-to-delete animations
  • App onboarding sequences
  • Visual feedback for deletions

Key features

  • Particle-based image explosion
  • Customizable animation speed
  • Smooth and performant rendering
  • Open-source and community-maintained
  • Easy integration via pub
  • Supports custom particle shapes

Suitable for

  • Developers seeking visual flair in UI transitions
  • Apps with interactive image handling
  • Design-focused Flutter applications
  • Prototyping engaging user interactions
  • Projects emphasizing animation quality

Considerations

  • May impact performance on low-end devices
  • Requires careful tuning for optimal visual results
  • Limited platform-specific customization
  • Best suited for short-duration animations
  • Not ideal for static or non-interactive content

Original README

Original README snapshot from the linked source repository. Visit the repository for the latest content.


A new open-source Flutter project that enables the developers to quickly enhance the ui of their application and can easily get started with the Flutter animation. The UI has been inspired from Redmi's uninstall application animation shown [here](https://github.com/mdg-soc-19/explode-view/blob/master/gif/explode-view-idea.gif).

This project contains the features of Flutter Animation that are required to complete an amazing Flutter application.

Explore how ExplodeView is made through this blog.

Index

Installing

1. Depend on it

Add this to your package's pubspec.yaml file:

  explode_view: ^1.0.4
2. Install it

You can install packages from the command line:

with pub:

$ pub get

with Flutter:

$ flutter packages get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:

import  'package:explode_view/explode_view.dart';

How To Use

Let's get this animation

For the explosion animation in the app, user has to simply add the ExplodeView as a child in any Widget like Stack and many more.

Example Code:

ExplodeView(  
 imagePath: 'assets/images/abc.png',  // path where the image is stored 
 imagePosFromLeft: 	120.0, // set x-coordinate for image 
 imagePosFromRight: 300.0,  // set y-coordinate for image 
);

For more info, please refer to the main.dart in example.

Algorithm

The algorithm used to build this project is as follows:

On clicking the image, the image would shake for some time and will disappear with generation of random particles in that image area and they would scatter farther with fading and upcoming transition and disappear finally on the screen. The colors of the particles are decided by the colors of the pixels of the image which provides the effect of breaking the image into pieces.

For more info, please refer to the explode_view.dart.

Documentation

Dart attribute Datatype Description Default Value
imagePath String The string which gives the path to the image. @required
imagePosFromLeft double The distance from the left edge of the screen. @required
imagePosFromTop double The distance from the top edge of the screen. @required

Bugs/Requests

If you encounter any problems feel free to open an issue. If you feel the library is
missing a feature, please raise a ticket on Github and I'll look into it.
Pull request are also welcome.

License

ExplodeView is licensed under MIT License. View license.

Categories

Animation & Transition

Dependencies

Dependency list 2 items

Source repository

Projects using this package

No data available yet.