Flutter 紙吹雪のエフェクト（アニメーション）を付ける

ユーザが目標を達成したときなどに祝うことができる、紙吹雪エフェクトのパッケージを紹介します。

紙吹雪エフェクト

紙吹雪エフェクト例

星で紙吹雪エフェクト例

動画demo

Flutter Confetti Demo

実装サンプル

右上から紙吹雪が飛び出てくる実装例です。

基本的には ConfettiWidget のコンストラクタで紙吹雪の各種設定を行います。

ConfettiController でアニメーションの開始停止を管理します。

実装は非常にシンプルでConfettiWidgetのパラメータ設定だけでほぼ実装が可能です！

class Confetti extends StatefulWidget {
  const Confetti({Key? key}) : super(key: key);

  @override
  _ConfettiSampleState createState() => _ConfettiSampleState();
}

class _ConfettiSampleState extends State<Confetti> {
  final _controller = ConfettiController(duration: const Duration(seconds: 1));

  @override
  void initState() {
    _controller.play();
    super.initState();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Align(
      alignment: Alignment.topRight,
      child: ConfettiWidget(
        confettiController: _controller,
        blastDirectionality: BlastDirectionality.explosive,
        emissionFrequency: 1,
        numberOfParticles: 15,
        shouldLoop: false,
        colors: const [Colors.red, Colors.green, Colors.lightBlue, Colors.yellow, Colors.orange],
        gravity: 0.2,
        particleDrag: 0.01,
      ),
    );
  }
}

`ConfettiWidget` のコンストラクタに設定可能なパラメータ

パラメータ	解説
blastDirectionality	粒子がランダムな方向に発射されるか、特定の方向に発射されるかを示すenum値です。 BlastDirectionality.explosiousはランダムな方向に発射されるので、blastDirectionを設定する必要はありません。 BlastDirectionality.directionalは紙吹雪の方向を指定するため、blastDirectionが必要です。
blastDirection	粒子放射の方向を決める放射状の値です。デフォルトはPI(180度)に設定されています。 PIを指定すると、キャンバス/スクリーンの左側に放出されます。
emissionFrequency	0から1の間の値を指定します。値が高いほど、1つのフレームでパーティクルが放出される可能性が高くなります。デフォルトは0.02（確率2%）に設定されています。
numberOfParticles	1回の発光で放出されるパーティクルの数。デフォルトでは10に設定されています。
shouldLoop	デュレーションが完了した後にエミッションをリセットするかどうかを決定し、その結果、パーティクルの放出が継続し、アニメーションがループします。
maxBlastForce	パーティクルの最初の5フレーム内でパーティクルに適用される最大ブラストフォースを決定します。デフォルトの maxBlastForce は 20 に設定されています。
minBlastForce	ライフの最初の5フレームでパーティクルに適用されるブラスト力の最小値を決定します。デフォルトの minBlastForce は 5 に設定されます。
displayTarget	trueの場合、パーティクルエミッターの位置を示すために十字が表示されます。
colors	紙吹雪の色を手動で設定するために、色のリストを提供することができます。省略された場合はランダムな色が使用されます。単一の色、例えば [Colors.blue] または複数の色 [Colors.blue, Colors.red, Colors.green] を `ConfettiWidget` の引数として与えることができます。
minimumSize	紙吹雪の最小可能サイズを制御するサイズ。 maximumSizeと組み合わせて使用する。例えば、Size(10,10)と等しいminimumSizeを設定すると、紙吹雪が指定されたサイズより小さくなることは決してないでしょう。正の値で、maxSizeより小さくなければなりません。nullは不可。
maximumSize	紙吹雪の最大可能サイズを制御するサイズ。 minimumSizeと組み合わせて使用する。例えば、maxSizeをSize(100,100)と同じに設定すると、(100,100)[width, height]の最小と最大の中間の大きさの紙吹雪が作成されます。正の値で、minimumSizeより大きくなければなりません。
gravity	紙吹雪が落ちる速度を変更します。 0から1の間の値で、値が高いほど速く落ちます。デフォルトでは0.1に設定されています。
particleDrag	紙吹雪に適用するドラッグ力を設定します。 0から1の間の値で、値が1の場合はドラッグが全くなく、0.1などの場合はドラッグが多くなります。デフォルトでは0.05に設定されています。
canvas	紙吹雪が表示される領域の大きさを設定します。デフォルトではフルスクリーンサイズに設定されています。
createParticlePath	独自のパーティクルを生成するためのカスタムPathを返すオプション関数です。デフォルトでは矩形のパスが返されます。