A Flutter widget that shoots confetti all over the screen.

Hi,

Your confetti library didn't work inside PageView().

Here is the sample code to test :

import 'dart:math';

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

void main() => runApp(const ConfettiSample());

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: MyApp(),
        ));
  }
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  ConfettiController _controllerLeft;
  ConfettiController _controllerRight;

  @override
  void initState() {
    _controllerLeft = ConfettiController(duration: const Duration(seconds: 2));
    _controllerRight = ConfettiController(duration: const Duration(seconds: 2));

    super.initState();
  }

  @override
  void dispose() {
    _controllerLeft.dispose();
    _controllerRight.dispose();
    super.dispose();
  }

  Widget confettis() {
    return Positioned(
      bottom: 0,
      left: 0,
      right: 0,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          ConfettiWidget(
            minBlastForce: 70,
            maxBlastForce: 100,
            numberOfParticles: 30,
            blastDirection: -1,
            confettiController: _controllerLeft,
          ),
          FloatingActionButton(
            backgroundColor: Colors.transparent,
            child: FlutterLogo(),
            onPressed: () {
              _controllerLeft.play();
            },
          ),
          Padding(padding: EdgeInsets.only(left: 40, right: 40)),
          ConfettiWidget(
            minBlastForce: 70,
            maxBlastForce: 100,
            numberOfParticles: 30,
            blastDirection: -2,
            confettiController: _controllerRight,
          ),
          FloatingActionButton(
            backgroundColor: Colors.transparent,
            child: Transform(
              alignment: Alignment.center,
              transform: Matrix4.rotationY(pi),
              child: FlutterLogo(),
            ),
            onPressed: () {
              _controllerRight.play();
            },
          )
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.transparent,
        body: PageView(
          controller: PageController(initialPage: 1),
          children: <Widget>[
            Container(
              color: Colors.blueGrey,
              child: Stack(
                children: [
                  confettis(),
                ],
              ),
            ),
            Container(
              color: Colors.pinkAccent,
            ),
          ],
        ),
      ),
    );
  }
}

With PageView() :

Without PageView() :

This is a request to add support for null safety to package:confetti. We depend on your awesome package, so would be great to have null safety enabled.

The Dart/Flutter team already encourages publishing the migrated packages: See this blog post.

See the migration guide for details about enabling null safety.

We're noticing in our dev builds using the Confetti package that the number of confetti as well as the number of times it bursts is sporadic. Sometimes it bursts fine with confetti, other times it jitters when it bursts, and sometimes there isn't any confetti at all. Here's how we're using the confetti:

Align(
            alignment: Alignment.center,
            child: ConfettiWidget(
              confettiController: _controllerCenter,
              blastDirectionality: BlastDirectionality.explosive,
              emissionFrequency: 0.05, // how often it should emit
              numberOfParticles: 10, // number of particles to emit
              gravity: 0.05, // gravity - or fall speed
              shouldLoop: false,
            ),
          ),

I recently changed my phone display settings from 60hz to 120hz. I noticed that this caused more confetti to be produced and caused them to fall faster.

This is an issue because different users with different devices will have a different user experience.

Is there an easy way to base the speeds on actual time (seconds) instead on the device's framerate?

Regarding the issue Custom particles #18 I added a variable that is holding a function that returns a custom Path and takes a Size type parameter.

Gif

I can't put it out of screen. I don't want to show the the particle emitter.

    return Align(
      alignment: Alignment.bottomCenter,
      child: ConfettiWidget(
          child: SizedBox(
              width: 0, height: SCREEN_SIZE + 10),
          confettiController: _confettiController,
          shouldLoop: true,
          blastDirection: pi / 2,
          maxBlastForce: 5,
          minBlastForce: 2,
          emissionFrequency: 0.05,
          numberOfParticles: 10,
          displayTarget: true,
      ),
    );

or

    return Align(
      alignment: Alignment.bottomCenter,
      child: Column(
        verticalDirection: VerticalDirection.up,
        children: [
          SizedBox(SCREEN_SIZE + 10),
          ConfettiWidget(
            confettiController: _confettiController,
            shouldLoop: true,
            blastDirection: pi / 2,
            maxBlastForce: 5,
            minBlastForce: 2,
            emissionFrequency: 0.05,
            numberOfParticles: 10,
            displayTarget: true,
          ),
        ],
      ),
    );

Error: Cannot run with sound null safety, because the following dependencies don't support null safety:

• package:confetti

• package:random_color

For solutions, see https://dart.dev/go/unsound-null-safety

Hi, I implemented Confetti before NullSafety and it was working fine. But when I upgraded it to NullSafety version, it stopped working. No error coming.

• Confetti is now conditionally reused instead of recreated, big improvement
• pauseEmissionOnLowFrameRate boolean added to Confetti widget to ensure smooth 60 FPS. This may however result in no confetti appearing if other complex operations are taking up resources. Set to false to disable.
• Temporary fix for issue [#66] with severe perf issues on Chrome macOS.
• Conditionally rotate on z-axis

Also added:

• clearAllParticles added to stop method on controller: _confettiController.stop(clearAllParticles: true); default is false. If true particles will immediately be cleared/removed on stop. Calling dispose will also clear all particles immediately.
• particleStatsCallback added to Confetti widget to retrieve the ParticleStats. This provides info on the particle system, such as number of active and number of total particles in memory.
• pauseEmissionOnLowFrameRate to Confetti widget. Default is true. This will pause additional confetti emission if the frame rate is below 60fps, and will continue when resources are available. This can be disabled by setting it to false, to force particle creation regardless of frame rate.

When I perform a single shot, I have to wait for all the particles to leave the screen for the animation to end. I wish I could hide the particles before they leave the screen. How to stop the animation and hide the particles without having to wait for all of them to be off screen?

I was trying this awesome widget. It works fine in chrome for me but errors out in Android builds. Following is the error I see and everything in the screen goes black. Not sure if this is enough for you to debug the issue.

/home/the100rabh/.pub-cache/hosted/pub.dartlang.org/confetti-0.6.0/lib/src/confetti.dart:229:20: Warning: Operand of null-aware operation '!' has type 'WidgetsBinding' which excludes null.
 - 'WidgetsBinding' is from 'package:flutter/src/widgets/binding.dart' ('/home/the100rabh/snap/flutter/common/flutter/packages/flutter/lib/src/widgets/binding.dart').
    WidgetsBinding.instance!.addPostFrameCallback((_) {

I tried to wrap it around Align-Widgets - the children, the parent, everything. It never works consistently. I also tried to put the ConfettiWidget in a Stack with a fixed size (Container wrapped around it) -> It does not align correctly. Sometimes the ConfettiWidget only emits from a singular point and every single confetti is displayed in its untransformed (and untranslated) form. Is there some tricky behaviour underlying?

Hi,

My project started to crash when blasting confetti so I made a new clean project and ran the example and it also crashes 500ms into the blast. Ive tried on an iPhone 11 and ipad 12.9-inch simulator. This is from "flutter run -v": [ +1 ms] DevFS: Deleting filesystem on the device (file:///Users/------------/Library/Developer/CoreSimulator/Devices/D61AB314-2F91-4E3C-B917-0663779B904F/data/Containers/Data/Application/79CD32A1-6125-4002-9609-E0C 2D236C848/tmp/confetti_testKa9sJj/confetti_test/) [ +254 ms] Ignored error while cleaning up DevFS: TimeoutException after 0:00:00.250000: Future not completed [ +7 ms] "flutter run" took 115 946ms. [ +113 ms] ensureAnalyticsSent: 109ms [ ] Running shutdown hooks [ ] Shutdown hooks complete [ ] exiting with code 0

Im on M1 Max and flutter master channel

Any idea whats happening? Thanks

i don't want the same stars and particles, i want to add custom png images confetti.

like i want to add coin png to fall from the top of the screen.

Please help me if anyone knows how to add custom image in confetti effect

This is very likely a bug in chrome, I am not sure where to report it so I am reporting it here

chrome version

This issue is only on the macOS version of chrome and works fine on Windows and Linux.

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

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  final confettiController = ConfettiController();

  @override
  Widget build(BuildContext context) {
    final screenSize = MediaQuery.of(context).size;
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Stack(
        fit: StackFit.expand,
        children: <Widget>[
          SizedBox(
            height: 50,
            width: 100,
            child: ElevatedButton(
                onPressed: () {
                  confettiController.play();
                },
                child: Text('tap me')),
          ),
          Positioned(
            top: -100,
            left: screenSize.width / 2,
            child: ConfettiWidget(
              confettiController: confettiController,
              blastDirection: 0,
              blastDirectionality: BlastDirectionality.explosive,
              particleDrag: 0.05,
              emissionFrequency: 0.5,
              minimumSize: const Size(10, 10),
              maximumSize: const Size(50, 50),
              numberOfParticles: 5,
              gravity: 0.2,
            ),
          ),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

Output comparison chrome vs Firefox on a mac m1

https://user-images.githubusercontent.com/31410839/171102525-95506b14-2a51-48ed-8747-f69caa7727b4.mp4

[✓] Flutter (Channel stable, 3.0.1, on macOS 12.3 21E230 darwin-arm, locale en-IN)
    • Flutter version 3.0.1 at /Users/mahesh/Documents/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision fb57da5f94 (3 days ago), 2022-05-19 15:50:29 -0700
    • Engine revision caaafc5604
    • Dart version 2.17.1
    • DevTools version 2.12.2

[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    • Android SDK at /Users/mahesh/Library/Android/sdk
    • Platform android-32, build-tools 31.0.0
    • ANDROID_HOME = /Users/mahesh/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.11+0-b60-7772763)
    • All Android licenses accepted.

[!] Xcode - develop for iOS and macOS (Xcode 13.2.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    ! CocoaPods 1.10.2 out of date (1.11.0 is recommended).
        CocoaPods is used to retrieve the iOS and macOS platform side's plugin code that responds to your plugin
        usage on the Dart side.
        Without CocoaPods, plugins will not work on iOS or macOS.
        For more info, see https://flutter.dev/platform-plugins
      To upgrade see https://guides.cocoapods.org/using/getting-started.html#installation for instructions.

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2021.1)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.11+0-b60-7772763)

[✓] IntelliJ IDEA Community Edition (version 2021.2.1)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin version 61.2.4
    • Dart plugin version 212.5080.8

[✓] VS Code (version 1.66.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.40.0

[✓] Connected device (4 available)
    • Redmi K20 Pro (mobile) • 192.168.1.2:5555                     • android-arm64  • Android 11 (API 30)
    • iPhone 12 Pro (mobile) • 19FD0231-BFF0-441D-B584-AD94C4084525 • ios            •
      com.apple.CoreSimulator.SimRuntime.iOS-15-2 (simulator)
    • macOS (desktop)        • macos                                • darwin-arm64   • macOS 12.3 21E230 darwin-arm
    • Chrome (web)           • chrome                               • web-javascript • Google Chrome 101.0.4951.64

[✓] HTTP Host Availability
    • All required HTTP hosts are available

! Doctor found issues in 1 category.

A spread option would be nice. E.g. [0, 1], where 0 is no spread, that is particles are shot in a line, where 1 is 360 deg spread.

You still should be able to randomize the spread, so perhaps a randomize option could also be added, e.g. [0, 1] where 0 is no random, that is always in a line and 1 is full random, e.g. 360 deg spread even when spread is 0. Or you could add a spread range e.g. [0.2, 0.5], so spread in between these values adding a random element in between.

An option to determine the spread of the starting position between the particles would also be nice.

Also, a variation of the particle rotation could perhaps be nice, and perhaps disable Z rotation all together.