ConfettiWidget.colors change have no effect when updating widget

[alestiago]

Experienced on version: 0.8.0

Description

When the ConfettiWidget gets its "colors" updated, it doesn't react to it. I think this it's happening due to _ConfettiWidgetState not handling didUpdateWidget.

Video

Screen.Recording.2025-12-22.at.16.55.58.mov

Sample

Reproductive sample

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

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

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(home: ConfettiSamplePage());
  }
}

class ConfettiSamplePage extends StatefulWidget {
  const ConfettiSamplePage({super.key});

  @override
  State<ConfettiSamplePage> createState() => _ConfettiSamplePageState();
}

class _ConfettiSamplePageState extends State<ConfettiSamplePage> {
  late ConfettiController _controller;
  Color _particleColor = Colors.blue;

  @override
  void initState() {
    super.initState();
    _controller = ConfettiController(duration: const Duration(seconds: 10));
  }

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

  void _toggleColor() {
    setState(() {
      _particleColor = _particleColor == Colors.blue ? Colors.red : Colors.blue;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Confetti Sample')),
      body: Stack(
        children: [
          Align(
            alignment: Alignment.topCenter,
            child: ConfettiWidget(
              confettiController: _controller,
              colors: [_particleColor],
            ),
          ),
          Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Container(
                      width: 50,
                      height: 50,
                      decoration: BoxDecoration(
                        color: _particleColor,
                        border: Border.all(color: Colors.black),
                      ),
                    ),
                    const SizedBox(width: 20),
                    ElevatedButton(
                      onPressed: _toggleColor,
                      child: const Text('Toggle Color'),
                    ),
                  ],
                ),
                const SizedBox(height: 50),
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    ElevatedButton(
                      onPressed: () {
                        _controller.play();
                      },
                      child: const Text('Play'),
                    ),
                    const SizedBox(width: 20),
                    ElevatedButton(
                      onPressed: () {
                        _controller.stop();
                      },
                      child: const Text('Pause'),
                    ),
                  ],
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

Further context

A temporary solution is to apply a key based on the color value.