Flutter Particles 2.0.2: Flutter 3.x でのクイックツアー (と小さな統合スニペット)

“いきいきとした” 動き (背景のアンビエントモーション、控えめなお祝い演出、退屈ではないローディング画面) を必要とする Flutter UI を作っているなら、パーティクルシステムは追加できる中で最もレバレッジの高いツールのひとつです。直近 48 時間のリリーススレッドが particles_flutter 2.0.2 を実機能の進化として発表しています: 形状、回転、境界の挙動、エミッターです: https://www.reddit.com/r/FlutterDev/comments/1qfjp1g/just_released_flutter_particles_200_major/。

Upstream:

• pub.dev: https://pub.dev/packages/particles_flutter
• GitHub: https://github.com/rajajain08/particles_flutter

2.0.x で実際に変わったこと (そしてなぜ重要か)

このリリースで興味深いのは “新しいバージョン番号” ではありません。ライブラリが “キャンバス上のドット” を出すだけの基本的なヘルパーから、形を与えられる小さなパーティクルエンジンへと進化したことです。

• 複数のパーティクル形状: 円でも十分ですが、三角形、長方形、画像はカスタム描画コードなしで “紙吹雪”、“雪”、“火花” に近づけてくれます。
• 回転: 回転はパーティクルを物理的に感じさせます。特に円形ではないスプライトで効果的です。
• 境界モード: bounce、wrap、pass-through は実際の UI のほとんどのユースケースをカバーします。
• エミッター: スポーンの挙動は、自作のパーティクルシステムが乱雑になりやすいポイントです。これが組み込みであることは大きな意味を持ちます。

これらはすべて Flutter 3.x や Dart 3.x プロジェクトと相性が良く、レンダラーを自分で書くために週末を費やすのではなく、効果そのものが欲しい場面に向いています。

パッケージを追加して、退屈なほどテストしやすくする

pubspec.yaml でバージョンを固定するところから始めます。

dependencies:
  flutter:
    sdk: flutter
  particles_flutter: ^2.0.2

その後、パーティクル効果はウィジェットの境界の裏に隔離して保持します。そうすれば、後から実装を差し替えても (自前の CustomPainter、Rive、シェーダー)、UI の他の部分には影響しません。

デモ画面に貼り付けられる小さな統合スニペット

正確な API はパッケージのバージョンによって変わるため、これは統合の “形” として扱ってください: Stack の中に置き、非インタラクティブにし、開始と停止ができるコントローラーで駆動します。

import 'package:flutter/material.dart';

class ParticlesDemoScreen extends StatelessWidget {
  const ParticlesDemoScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          // Replace this with the actual particles_flutter widget from the docs.
          // The key point is: keep it behind everything else and keep it cheap.
          const Positioned.fill(
            child: IgnorePointer(
              child: ColoredBox(color: Colors.black),
            ),
          ),
          Center(
            child: ElevatedButton(
              onPressed: () {},
              child: const Text('Ship it'),
            ),
          ),
        ],
      ),
    );
  }
}

実際のパーティクルウィジェットを組み込むときは、予測可能なデフォルトを目指します。

• パーティクルの最大数を制限してください。
• 実行時のデコードよりも、事前にロードした画像を優先してください。
• 画面が見えていないときは効果を一時停止してください。

権威ある API サーフェスが欲しい場合は、upstream のドキュメントとサンプルを真実の源として使ってください: pub.dev と GitHub。