Life is an experiment!!!!
Fluttering through the widget world of Flutter, I stuck upon an interesting use case. We often see the weather updates may be in our phones, desktops etc, but we do….
I questioned myself, how to implement the stylish raining background or scorching heat one….Hmmm!!!!
Begin…
Introducing Sprite Widget,
As per the documentation,
SpriteWidget is an open source toolkit for building complex, high performance animations and 2D games with Flutter. You can use SpriteWidget to create anything from an animated icon to a full fledged game.
Whoa, that was all I needed…

Merging with Flutter :
- SpriteWidget is available like any other package. Just add it as a dependency to your pubspec.yaml and you are good to go.
dependencies: flutter: sdk: flutter spritewidget:
2. Import the following line
import 'package:spritewidget/spritewidget.dart';
Adding rain droplets :
- Initialize the ImageMap and SpriteSheet.
- Load images using the
ImageMap
andSpriteSheet
, which contains rain drops.
ImageMap _imageMap = new ImageMap(bundle);
await _imageMap.load(<String>[
'assets/icon-rain.png',
'assets/weathersprites.png',
]);
String json = await DefaultAssetBundle.of(context)
.loadString('assets/weathersprites.json');
_sprites = new SpriteSheet(_imageMap['assets/weathersprites.png'], json);
3. Do step 1 and 2, in the initState of your Stateful Widget.
_loadAssets(assetBundle).then((_) {
setState(() {
assetsLoaded = true;
world = new RainWorld();
});
});
Definition of _loadAssets :
Future<Null> _loadAssets(AssetBundle bundle) async {}
4. We need to initialize the RainWorld(). What is RainWorld???
A root node that is used to draw it’s contents. Any sprite nodes that you add to the root node will be rendered by the SpriteWidget.
class RainWorld extends NodeWithSize {
RainNode _rain;
RainWorld() : super(const Size(2048.0, 2048.0)) {
_rain = new RainNode();
_rain.active = true;
addChild(_rain);
}
}
5. Finally we need to setup our RainNode(). What is RainNode???
A base class for all objects that can be added to the sprite node tree and rendered to screen using SpriteBox
and SpriteWidget
.
The
Node
class itself doesn’t render any content, but provides the basic functions of any type of node, such as handling transformations and user input. To render the node tree, a root node must be added to aSpriteBox
or aSpriteWidget
. Commonly used sub-classes ofNode
areSprite
,NodeWithSize etc.
class RainNode extends Node {
}
Final look of RainNode,

In the _addParticles, we simply take up the parameters as provided by the SpriteWidget class and manipulate by the input parameter(distance).
Note : ParticleSystem is a part of SpriteWidget package. We are not creating anything new.
void _addParticles(double distance) {
ParticleSystem particleSystem = ParticleSystem(
_sprites['raindrop.png'],
transferMode: BlendMode.srcATop, //lighten
posVar: const Offset(1300.0, 0.0),
direction: 90.0,
directionVar: 0.0,
speed: 10000.0 / distance,
speedVar: 100.0 / distance,
startSize: 1.2 / distance,
startSizeVar: 0.2 / distance,
endSize: 1.2 / distance,
endSizeVar: 0.2 / distance,
life: 1.5 * distance,
lifeVar: 1.0 * distance,
maxParticles: 15,
);
particleSystem.position = const Offset(1024.0, -200.0);
particleSystem.rotation = 10.0;
particleSystem.opacity = 0.0;
_particles.add(particleSystem);
addChild(particleSystem);
}
Feel free to tweak, the above values according to you…
Lastly, add the animations to the particles
set active(bool active) {
actions.stopAll();
for (ParticleSystem system in _particles) {
if (active) {
actions.run(new ActionTween<double>(
(a) => system.opacity = a,
system.opacity,
1.0,
2.0,
));
} else {
actions.run(new ActionTween<double>(
(a) => system.opacity = a, system.opacity, 0.0, 0.5));
}
}
}
ActionTween (from SpriteWidget)
Creates a new tween action. The setter
will be called to update the animated property from startVal
to endVal
over the duration
time in seconds. Optionally an animation curve
can be passed in for easing the animation.
Phew…..We are ready
For complete source code :
https://github.com/AseemWangoo/flutter_programs/blob/master/spritewidget.zip
Nice example, thank you!
But how to make that “Raining on the brigde!!” Text widget “tappable”. I think the SpriteWidget’s rootNode covers the whole screen and prevent tapping on another widget…