explode_view 1.0.4

  • Readme
  • Changelog
  • Example
  • Installing
  • 74


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.

[1.0.4] - 2019-12-09.

[1.0.4]

  • Formatted the code

[1.0.3]

  • Fixed health issues in pub.dev

[1.0.2]

  • Updated the code

[1.0.1]

  • Updated the README file

[1.0.0]

  • Stable release with solving maintenance issues in pub.dev

example/README.md

example #

An example application for explode-view library

Getting Started #

This project is a starting point for a Flutter application.

A few resources to get you started if this is your first Flutter project:

For help getting started with Flutter, view our online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.

Use this package as a library

1. Depend on it

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


dependencies:
  explode_view: ^1.0.4

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub 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';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
48
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
74
Learn more about scoring.

We analyzed this package on Jan 16, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.7.0
  • pana: 0.13.4
  • Flutter: 1.12.13+hotfix.5

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.2.3 <3.0.0
flutter 0.0.0
image ^2.1.4 2.1.12
vector_math ^2.0.8 2.0.8
Transitive dependencies
archive 2.0.13
args 1.5.2
charcode 1.1.2
collection 1.14.11 1.14.12
convert 2.1.1
crypto 2.1.4
meta 1.1.8
path 1.6.4
petitparser 3.0.0
sky_engine 0.0.99
typed_data 1.1.6
xml 3.7.0
Dev dependencies
flutter_test