funwithflutter / flutter_confetti

A Flutter widget that shoots confetti all over the screen.
https://pub.dev/packages/confetti
MIT License
439 stars 79 forks source link

blast a emoji #58

Open rawquesh opened 3 years ago

rawquesh commented 3 years ago

thank you for the great package btw, I would like to know is there any way to blast an emoji or an emoji in SVG form, it would be great if you have any solution about this.

erf commented 2 years ago

You can use the path_drawing package to transform svg to path.

erf commented 2 years ago

You can also use this web app to turn text into svg, but advanced symbols or emojis are not supported.

funwithflutter commented 2 years ago

@erf path_drawing is really nice! Thanks for pointing that out. I played around with it and here is an example if you want to have customizable sizes. This paints a sword, from here (https://yqnn.github.io/svg-path-editor/).

import 'dart:math';

import 'package:confetti/confetti.dart';
import 'package:flutter/material.dart';
import 'package:path_drawing/path_drawing.dart';

class ConfettiSample extends StatelessWidget {
  const ConfettiSample({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Confetti',
        home: Scaffold(
          backgroundColor: Colors.grey[900],
          body: Confetti(),
        ));
  }
}

return ConfettiWidget(
      confettiController: _controllerCenter,
      blastDirectionality: BlastDirectionality.explosive,
      shouldLoop: true,
      colors: const [
        Colors.green,
        Colors.blue,
        Colors.pink,
        Colors.orange,
        Colors.purple,
      ],
      maximumSize: Size(50, 50),
      createParticlePath: (size) {
        final trianglePath = parseSvgPathData(
            'M 4 8 L 10 1 L 13 0 L 12 3 L 5 9 C 6 10 6 11 7 10 C 7 11 8 12 7 12 A 1.42 1.42 0 0 1 6 13 A 5 5 0 0 0 4 10 Q 3.5 9.9 3.5 10.5 T 2 11.8 T 1.2 11 T 2.5 9.5 T 3 9 A 5 5 90 0 0 0 7 A 1.42 1.42 0 0 1 1 6 C 1 5 2 6 3 6 C 2 7 3 7 4 8 M 10 1 L 10 3 L 12 3 L 10.2 2.8 L 10 1');
        final Rect pathBounds = trianglePath.getBounds();
        final Matrix4 matrix4 = Matrix4.identity();
        matrix4.scale(
            size.width / pathBounds.width, size.height / pathBounds.height);
        return trianglePath.transform(matrix4.storage);
      },
    );
shinriyo commented 4 months ago

resolved?