【Flutter】紙吹雪はこれで決定！Confettiパッケージについて徹底解説してみた

概要

TODOアプリや何か目標を達成するアプリなど、達成時の演出は気持ち良くしたいですよね。
その気持ちよさはアプリの継続にも大きく繋がってくるかと思います。

今回はそんな時にぴったりのConfettiパッケージについて解説しようと思います。

confetti | Flutter package

Blast colorful confetti all over the screen. Celebrate in app achievements with style. Control the velocity, angle, gravity and amount of confetti.

pub.dev

Confettiパッケージのインストール

パッケージのインストール方法については過去記事のこちらを
参考にしていただけると出来るかと思います。

VSCode使いの方は、拡張機能であるPubspecAssistを使うと
簡単にインストール出来るのでおすすめです！

【Flutter】3秒でパッケージ追加完了！？VSCode使いに絶対に入れて欲しい拡張機能「Pubspec Assist」を紹介するよ！

Flutterでの開発には、世界中のデベロッパが作ってくれたパッケージのインストールが欠かせません。 あなたはどの様にパッケージを追加していますか？ 実は、以前パッケージのインストール記事を書きました。 pub...

blog.dalt.me

2020.10.06

それ以外の方はこちらをご覧ください。

【超簡単！】Flutterのパッケージのインストール方法を説明するよ！

概要 Flutter(Dart)で画像のクリッピングするコードが書けますか？ Flutter(Dart)でhttp通信するコードが書けますか？ 大丈夫、書けなくて良いんです。 Flutterでは、色んな人が使いそ...

blog.dalt.me

2020.10.06

最低限のコード

class ConfettiSample extends StatefulWidget {
  @override
  _ConfettiSampleState createState() => _ConfettiSampleState();
}

class _ConfettiSampleState extends State<ConfettiSample> {
  final _controller = ConfettiController(duration: Duration(seconds: 50));

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Align(
        alignment: Alignment.topRight,
        child: ConfettiWidget(
          confettiController: _controller,
        ),
      ),
    );
  }
}

これだけで最低限の紙吹雪が出てきます。

では、これをカスタマイズするにはどうすれば良いのでしょうか？
何がカスタマイズ出来るのでしょうか？

Confettiパッケージでカスタマイズ出来るところ

それでは、これから何をカスタマイズ出来るのか紹介していきましょう。

全体の秒数

final _controller = ConfettiController(duration: const Duration(seconds: 10));

ConfettiControllerインスタンスを生成する際に、引数として渡します。
何も渡さなければデフォルトで30秒間が設定されています。

発射頻度

0から1の間で設定し、大きければ大きいほど1フレームの間に
発射する紙吹雪の頻度が増えます。

ConfettiWidget(
  confettiController: _controller,
  emissionFrequency: 0.1,
);

emissionFrequency: 0.1

emissionFrequency: 1

噴出角度

0から2πの間で噴出する角度を設定する事が出来ます。
デフォルトはπになっており、真左に向かって噴出します。
1/4πが真下、3/4πが真上になっています。

import 'dart:math';

ConfettiWidget(
  confettiController: _controller,
  blastDirection: pi,
);

blastDirection: 0

blastDirection: 3 * pi / 2

最小/最大噴出初速

紙吹雪の出る瞬間の5フレーム分の速度の最小、最大値を設定します。
デフォルトは最小5、最大20です。
どちらかだけを指定する事も出来ますが、最小値<最大値は満たしている必要があります。

ConfettiWidget(
  confettiController: _controller,
  minBlastForce: 5,
  maxBlastForce: 20,
);

minBlastForce: 50, maxBlastForce: 200

一度に発射する紙の数

一度に発射する紙の数を設定します。
デフォルトは10です。

ConfettiWidget(
  confettiController: _controller,
  numberOfParticles: 10,
);

numberOfParticles: 100

噴出方向性

噴出開始位置からの噴出の仕方を設定できます。
enumになっており、directional or explosiveで設定できます。
デフォルトはdirectional。

ConfettiWidget(
  confettiController: _controller,
  blastDirectionality: BlastDirectionality.directional,
);

blastDirectionality: BlastDirectionality.explosive

紙の落ちる速さ

紙の落ちる速さ、つまり重力の大きさを設定します。
0〜1の間で設定します。
0でも無重力というわけではなく、落ちはしますがかなりゆるやかになっています。
デフォルトは0.1。

ConfettiWidget(
  confettiController: _controller,
  gravity: 0.1,
);

gravity: 0

gravity: 1

繰り返しをするかどうか

最初に設定した、「全体の秒数」の表示が終わった後にループをするかどうかを設定します。
デフォルトはfalse。
trueにしても急に紙吹雪がなくなったりしないのでどこが継ぎ目か分からない様に上手くやってくれている印象です。

ConfettiWidget(
  confettiController: _controller,
  shouldLoop: false,
);

紙吹雪の色

紙吹雪の色を設定します。
複数色設定する事も可能です。
設定された値の中からランダムで選択されます。
指定しないとランダム色となります。

想像はつくと思いますが、空だとエラーになってしまいます。

ConfettiWidget(
  confettiController: _controller,
  minBlastForce: 50,
  colors: null,
);

紙の最小/最大サイズ

紙吹雪それぞれの最小、最大サイズを設定します。
その間でランダムに大きさが決定されます。
デフォルトは最小Size(20, 10)、最大Size(30, 15)です。

ConfettiWidget(
  confettiController: _controller,
  minimumSize: Size(20, 10),
  maximumSize: Size(30, 15),
);

minimumSize: Size(1, 1), maximumSize: Size(10, 10)

抗力

紙吹雪に対する抗力を設定出来ます。
0から1の間で設定し、小さければ小さいほど強い抗力になります。
デフォルトは0.05。

ConfettiWidget(
  confettiController: _controller,
  particleDrag: 0.05,
);

particleDrag: 0

particleDrag: 0.5

particleDrag: 1

描画領域

紙吹雪の描画領域を指定することができます。
この指定サイズを超えた紙吹雪は描画されません。
デフォルトはnullです。

ConfettiWidget(
  confettiController: _controller,
  canvas: null,
);

canvas: Size(500, 500)

おまけ：発射開始位置描画

ほぼ開発用途ですが、紙吹雪の発射開始位置を描画させるかどうかを指定します。
デフォルトはfalseです。

displayTarget: true

いかがでしたでしょうか？
皆さんの好みの紙吹雪演出は作れそうでしょうか？

Twitterフォローお願いします

Twitterコミュニティ参加お願いします

☕️ Buy me a coffee