Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/norbert515/pimp_my_button
Add particle effects to anything.
https://github.com/norbert515/pimp_my_button
flutter flutter-animation flutter-package
Last synced: 8 days ago
JSON representation
Add particle effects to anything.
- Host: GitHub
- URL: https://github.com/norbert515/pimp_my_button
- Owner: Norbert515
- License: mit
- Created: 2018-09-03T09:17:33.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2021-04-18T17:34:23.000Z (over 3 years ago)
- Last Synced: 2024-06-19T03:12:33.985Z (5 months ago)
- Topics: flutter, flutter-animation, flutter-package
- Language: Dart
- Homepage:
- Size: 239 KB
- Stars: 274
- Watchers: 4
- Forks: 33
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# Showcase
# Features
- Highly customizable (Don't like my particle effects? Make your own with little effort!)
- Very easy to use
- A lot of premade particles
# Installation
I will publish this package on pub if people enjoy it. So leave a star if you do ;)
```yaml
dependencies:
pimp_my_button: ^1.0.0
```
run packages get and import it
```
import 'package:pimp_my_button/pimp_my_button.dart';
```
**If you are not able to import it, restart your IDE see: https://github.com/flutter/flutter/issues/17016**
# Basics
The basic setup looks like this:
```dart
PimpedButton(
particle: DemoParticle(),
pimpedWidgetBuilder: (context, controller) {
return FloatingActionButton(onPressed: () {
controller.forward(from: 0.0);
},);
},
);
```
The `pimpedWidgetBuilder` uses a builder which besides providing a new context and an `AnimationController`.
When your button is pressed call this code:
```dart
controller.forward(from: 0.0);
```
It's important to include the `from` field because otherwise the animation won't play after the first tap.
The particle specified in the `PimpedButton` controlls what the animation looks like.
# Demo Particle Walk Through
We'll walk through how to build a `Particle` yourself, step by step.
Here is what were are going to build:
Each particle has to extend `Particle` and override this method:
`void paint(Canvas canvas, Size size, progress, seed)`
- Canvas is the canvas you can paint on
- The size is the bounding box of the the enclosing widget
- Progress is a double between 0 and 1, it reflects the progress in the animation
- The seed is an int value generated once for every tap. When dealing with randoms, initialize your
`Random` with that seed (so every frame is synced)
## The first particle
```dart
CompositeParticle(
children: []
).paint(canvas, size, progressm seed);
```
You have to paint atleast one `Particle` in the paint(.,.,.,) method. Usually this would be the `CompositeParticle`.
The `CompositeParticle` doesn't do much on its own. It only paints all of its children.
## Adding actual particles
The next interesting particle is the `CircleMirror` and `RectangeMirror`.
```dart
CircleMirror(
numberOfParticles: 6,
child: AnimatedPositionedParticle(
begin: Offset(0.0, 20.0),
end: Offset(0.0, 60.0),
child: FadingRect(width: 5.0, height: 15.0, color: Colors.pink),
),
initialRotation: -pi / randomMirrorOffset),
```
This mirrors its particle around the middle point in a circular shape.
In this case you provide one `Particle` which is going to be drawn multiple times, thus looking
identical. If you want different particles (or the same with randomized values), use the `CircleMirror.builder`.
At the bottom of the hierarchy is the `FadingRect`, all it does is drawing a rectangle which fades out over time.
To make it move, it's wrapped in an `AnimatedPositionedParticle`.
This is the full code:
```dart
class DemoParticle extends Particle {
@override
void paint(Canvas canvas, Size size, progress, seed) {
Random random = Random(seed);
int randomMirrorOffset = random.nextInt(8) + 1;
CompositeParticle(children: [
Firework(),
CircleMirror(
numberOfParticles: 6,
child: AnimatedPositionedParticle(
begin: Offset(0.0, 20.0),
end: Offset(0.0, 60.0),
child: FadingRect(width: 5.0, height: 15.0, color: Colors.pink),
),
initialRotation: -pi / randomMirrorOffset),
CircleMirror.builder(
numberOfParticles: 6,
particleBuilder: (index) {
return IntervalParticle(
child: AnimatedPositionedParticle(
begin: Offset(0.0, 30.0),
end: Offset(0.0, 50.0),
child: FadingTriangle(
baseSize: 6.0 + random.nextDouble() * 4.0,
heightToBaseFactor: 1.0 + random.nextDouble(),
variation: random.nextDouble(),
color: Colors.green),
),
interval: Interval(
0.0,
0.8,
));
},
// division by 0 is not good ;)
initialRotation: -pi / randomMirrorOffset + 8),
]).paint(canvas, size, progress, seed);
}
}
```
# Notes
### Some particles worth checking out:
- `IntervalParticle`, applies an interval and/or curve to the child.
- `FourRandomSlotParticle`, positions 4 children on the different sections.
- `PoppingCircle`, pretty popping circle
### Check out other demo particles:
https://github.com/Norbert515/pimp_my_button/blob/master/lib/src/demo_particles.dart
### You are not restricted to use the particles in the context of "Pimp my button", the particles can be drawn on any regular canvas.