Flutter: How to do this emoji firework animation? - flutter

Question

I want to do this emoji fireworks animation in a flutter widget:
https://codepen.io/z3vin/pen/QEqqdY
The code is in TypeScript:
class Firework {
constructor(app) {
this.app = app;
this.rnd = app.rnd;
this.bursts = [];
this.reset();
}
reset() {
this.color = `hsl(${this.rnd.int(360)},90%,50%)`;
this.alive = true;
this.bursting = false;
this.pos = new Vec( this.rnd.int(0,this.app.w), this.app.h+40 );
this.vel = new Vec(0,-this.rnd.real(16.0,this.app.h/40));
this.acc = new Vec(0,0);
this.size = this.rnd.real(0.25,5.0);
this.emoji = this.rnd.pick(this.app.emojis);
}
applyForce(f){
this.vel.add(f);
}
update() {
this.applyForce(this.app.forces.gravity);
this.vel.add(this.acc);
this.pos.add(this.vel);
if(this.vel.y > 1) {
this.bursting = true;
const maxBursts = Math.floor(this.app.w / 4);
const numBursts = this.rnd.chance(5) ? this.rnd.int(100,maxBursts) : this.rnd.int(20,80);
for(let i = 1; i < numBursts; i++){
this.bursts.push(new Burst(this.pos, this));
}
}
}
draw() {
const ctx = this.app.ctx;
if(!this.bursting) {
this.update();
ctx.save();
ctx.fillStyle = this.color;
ctx.font = `${this.size}em sans-serif`;
ctx.fillText(this.emoji,this.pos.x,this.pos.y);
//ctx.fillRect(this.pos.x, this.pos.y, this.size, this.size);
ctx.restore();
} else {
this.bursts.forEach(burst=>{
if(!burst.alive){
without(this.bursts,burst);
if(this.bursts.length ===0){
this.alive = false;
}
}
burst.draw();
});
}
}
}
class Burst {
constructor(origin,firework){
this.firework = firework;
this.app = firework.app;
this.pos = origin.clone();
this.rnd = firework.rnd;
this.lifespan = this.rnd.int(5,50);
this.vel = new Vec(this.rnd.real(-8.0,8.0),this.rnd.real(-8.0,8.0));
this.acc = new Vec(0,0);
this.color = this.firework.color;
this.size = this.rnd.real(0.5,15.0);
const sparkle = this.rnd.chance(20) ? 2 : 1;
this.sizeStep = this.size/(this.lifespan/sparkle);
this.alive = true;
this.rotate = this.rnd.real(0,Math.PI*2);
}
applyForce(f){
this.vel.add(f);
}
update() {
this.applyForce(this.app.forces.gravity);
this.vel.add(this.acc);
this.pos.add(this.vel);
//this.size -= this.sizeStep;
//this.rotate += 0.1;
}
draw() {
const ctx = this.app.ctx;
this.update();
ctx.save();
ctx.translate(this.pos.x,this.pos.y)
ctx.rotate(this.rotate);
ctx.font = `${this.firework.size/2}em sans-serif`;
ctx.fillText(this.firework.emoji,0,0);
ctx.restore();
this.lifespan--;
if(this.lifespan<=0){
this.alive = false;
}
}
}
class App {
constructor(){
this.ctx = document.getElementById('cnv').getContext('2d');
this.sizeCanvas();
this.initEvents();
this.rnd = new Random();
this.fireworks = [];
this.forces = {
gravity: new Vec(0,0.25)
};
this.emojis = ['😊','🍕','💩','☘','👀','🐟','💥','⚡️','🍉','🍟','⚽️'];
window.requestAnimationFrame((t)=>{this.draw(t)});
log(this);
}
sizeCanvas(){
this.w = this.ctx.canvas.width = window.innerWidth;
this.h = this.ctx.canvas.height = window.innerHeight;
}
clearIt() {
//this.ctx.clearRect(0,0,this.w,this.h);
this.ctx.save();
this.ctx.fillStyle = 'hsla(220,60%,10%,0.12)';
this.ctx.fillRect(0,0,this.w,this.h)
this.ctx.restore();
}
draw(t){
this.clearIt();
window.requestAnimationFrame((t)=>{this.draw(t)});
if(this.rnd.chance(this.w/80)){
this.fireworks.push(new Firework(this));
}
this.fireworks.forEach(f=>{
if(!f.alive){
without(this.fireworks,f);
}
//log(this.fireworks.length)
f.draw();
});
}
initEvents(){
window.onresize = (e)=>{this.sizeCanvas(e)};
}
}
const foo = 'dsdsa';
const log = console.log.bind(console);
const Vec = TinyVector;
document.addEventListener('DOMContentLoaded', function () {
const app = new App();
});
function without (arr, el) {
arr.splice(arr.indexOf(el),1);
}
Can someone guide me to do this kind of UI making in flutter?
I'm desesperate to find the solution but i don't understand how animation works and i found nothing on stack or other website to do this.
Thanks a lot to people who know how to do that.
I already tried the confetti package but it's not my final goal.