Hello ….,

I’ll share to you how to implement a cool particle effect, may it looks like a blood. If you change to a yellow color, it will be a fire. Maybe. =]]

Idea

The effect contains many particles which have the following characteristics:

Offset speed: speed in x (-5 to 5), y (-15 to 5)

Offset location: x (screen width /2), y (screen height / 3 * 2)

double radius: range 10–30

double life: range 20–30

Color color: HSLColor.fromAHSL(1.0, 0.0, 1.0,0.3)

double opacity: depend on the life cycle

one particle

class Particle {

Offset speed;

Offset location;

double radius;

double life;

Color color;

double opacity;

}

Color HSL, find here: http://www.december.com/html/spec/colorhsl.html

The particle will be updated by moving:

move() {

this.remainingLife--;

this.radius--;

this.location = this.location + this.speed;

int colorI = palette.length - (this.remainingLife / this.life * palette.length).round();

if (colorI >= 0 && colorI < palette.length) {

this.color = palette[colorI];

}

}

The opacity calculated by the remaining lifetime. The particle decorated by RadialGradient before display on a canvas

display(Canvas canvas) {

this.opacity = (this.remainingLife / this.life * 100).round() / 100;

var gradient = new RadialGradient(

colors: [

Color.fromRGBO(

this.color.red, this.color.green, this.color.blue, this.opacity),

Color.fromRGBO(

this.color.red, this.color.green, this.color.blue, this.opacity),

Color.fromRGBO(this.color.red, this.color.green, this.color.blue, 0.0)

],

stops: [0.0, 0.5, 1.0],

); Paint painter = new Paint()

..style = PaintingStyle.fill

..shader = gradient.createShader(

Rect.fromCircle(center: this.location, radius: this.radius)); canvas.drawCircle(this.location, this.radius, painter);

}

Finally, just generate a list of particle and update by frame in State

//Generate particles

new List.generate(100, (i) {

particleSystem.add(new Particle(widget.screenSize));

}); animationController = new AnimationController(

vsync: this, duration: new Duration(milliseconds: 100))

..addListener(() {

for (int i = 0; i < particleSystem.length; i++) {

// Move particle

particleSystem[i].move(); // Restored particle

if (particleSystem[i].remainingLife < 0 ||

particleSystem[i].radius < 0) {

particleSystem[i] = new Particle(widget.screenSize);

}

}

})

..repeat();

Some things are not optimized, do it yourself.

Demo

Source (blood.dart)