Flutter Gems is a curated list of 6700+ useful Dart & Flutter packages that are categorized based on functionality.
Top Flutter Background Effects, Gradients and Shaders packages
Last updated: January 26, 2025
A background can be added to a Flutter app that usually appears underneath other widgets. It can be a static image, a gradient, a motion effect backgroud or can utilize shaders to render realistic effects. Backgrounds help in adding depth to an app.
The complete list of Flutter packages that can add Background Images, Background Effects, Gradients & Shaders to Flutter apps is provided below.
flutter_shaders
👍 88 ⬇️ 420.6K
Dart 3 compatibleMaintenance Status: Good
A collection of utilities for working with the FragmentProgram API in Flutter.
animated_background
👍 297 ⬇️ 1.8K
Dart 3 compatibleMaintenance Status: Poor
Animated Backgrounds for Flutter. Easily extended to paint whatever you want on the canvas.
![mesh_gradient Card Image](/media-cards/mesh_gradient.png)
mesh_gradient
👍 182 ⬇️ 4.5K
Dart 3 compatibleMaintenance Status: Good
Widgets which create beautiful fluid-like mesh gradients in Flutter.
![animate_gradient Card Image](/media-cards/animate_gradient.gif)
animate_gradient
👍 160 ⬇️ 1.8K
Dart 3 compatibleMaintenance Status: Good
This Package lets you make animated gradients without any hassle. Just pass the primary and secondary colors and you're done.
![particles_flutter Card Image](/media-cards/particles_flutter.gif)
particles_flutter
👍 157 ⬇️ 902
Dart 3 compatibleMaintenance Status: Good
A flutter package for particle animation. You can control the animation speed, number of Particles on the screen, dimension and shape of particle via connecting lines,etc.
![particle_field Card Image](/media-cards/particle_field.gif)
particle_field
👍 132 ⬇️ 5.5K
Dart 3 compatibleMaintenance Status: Average
A Flutter Widget for adding high performance custom particle effects to your UI.
![mesh Card Image](/media-cards/mesh.png)
mesh
👍 111 ⬇️ 3.7K
Dart 3 compatibleMaintenance Status: Good
Fast and highly customizable animated Mesh Gradients for Flutter applications. Using Shaders and vertices.
![weather_animation Card Image](/media-cards/weather_animation.png)
weather_animation
👍 107 ⬇️ 290
Dart 3 compatibleMaintenance Status: Good
The package contains beautiful weather animations. Easy setup with the weather configurator!
parallax_sensors_bg
👍 106 ⬇️ 436
Dart 3 compatibleMaintenance Status: Poor
Flutter package to simplify giving a parallax effect in the background of a page that responds to a corresponding sensor detection.
![newton_particles Card Image](/media-cards/newton_particles.png)
newton_particles
👍 97 ⬇️ 4.5K
Dart 3 compatibleMaintenance Status: Good
Create stunning animations with configurable particle emitters. Add rain, smoke, and more effects to your Flutter app!
![patterns_canvas Card Image](/media-cards/patterns_canvas.png)
patterns_canvas
👍 96 ⬇️ 3.2K
Dart 3 compatibleMaintenance Status: Good
Draw patterns like stripes or dots on canvas elements or widgets.
![animated_glitch Card Image](/media-cards/animated_glitch.gif)
animated_glitch
👍 97 ⬇️ 13
Dart 3 compatibleMaintenance Status: Average
Animated Glitch is a Flutter package that allows you to easily create glitch effects and control them
reflective_visual
👍 91 ⬇️ 58
Dart 3 compatibleMaintenance Status: Average
Reflective visual for flutter apps.
![metaballs Card Image](/media-cards/metaballs.gif)
metaballs
👍 88 ⬇️ 321
Dart 3 compatibleMaintenance Status: Average
A metaballs implementation for flutter using webgl on the web and the shader package on other devices
![floating_bubbles Card Image](/media-cards/floating_bubbles.png)
floating_bubbles
👍 84 ⬇️ 1.3K
Dart 3 compatibleMaintenance Status: Good
A Flutter Package for adding Floating bubbles on the Foreground to any Flutter widget.
![parallax_rain Card Image](/media-cards/parallax_rain.png)
parallax_rain
👍 81 ⬇️ 211
Dart 3 compatibleMaintenance Status: Good
Use this package to create cool 3D rain effects. Customize with multiple colors, different raindrop speeds, drop trail effects and more!
flutter_weather_bg_null_safety
👍 75 ⬇️ 232
Dart 3 compatibleMaintenance Status: Poor
Provide a variety of weather background animation effects, covering 15 weather types, including sunny,rain,snow...
![vitality Card Image](/media-cards/vitality.png)
vitality
👍 66 ⬇️ 85
Dart 3 compatibleMaintenance Status: Average
Add captivating live animations to your Flutter app effortlessly with Vitality!
shader
👍 62 ⬇️ 43
Dart 3 compatibleMaintenance Status: Poor
Command-line application for compiling GLSL shaders into Flutter-compatible SPR-V byte code.
scaffold_gradient_background
👍 61 ⬇️ 7
Dart 3 compatibleMaintenance Status: Poor
A widget that works like a scaffold, except that you can set a gradient as background.
![aura_box Card Image](/media-cards/aura_box.png)
aura_box
👍 56 ⬇️ 196
Dart 3 compatibleMaintenance Status: Average
Flutter Widget that combines multiple radial gradients and blur effect.
![particles_fly Card Image](/media-cards/particles_fly.png)
particles_fly
👍 48 ⬇️ 116
Dart 3 compatibleMaintenance Status: Good
A package that provides an easy way to add particles js in flutter project.
![snow_fall_animation Card Image](/media-cards/snow_fall_animation.png)
snow_fall_animation
👍 45 ⬇️ 0
Dart 3 compatibleMaintenance Status: Good
A Flutter plugin that creates beautiful snowfall animations and effects
![magnifying_glass Card Image](/media-cards/magnifying_glass.png)
magnifying_glass
👍 42 ⬇️ 61
Dart 3 compatibleMaintenance Status: Good
Flutter real-time magnifying glass lens widget with Barrel/Pincushion distortion.
![shader_buffers Card Image](/media-cards/shader_buffers.png)
shader_buffers
👍 40 ⬇️ 71
Dart 3 compatibleMaintenance Status: Good
Using shaders to feed a shader. Make shaders simplier to use with a focus on the ShaderToy.com website.
parallax_effect
👍 40 ⬇️ 54
Dart 3 compatibleMaintenance Status: Poor
Parallax effect animations for all platforms.
![fancy_containers Card Image](/media-cards/fancy_containers.jpeg)
fancy_containers
👍 40 ⬇️ 45
Dart 3 compatibleMaintenance Status: Average
Fancy Containers Flutter Package
![shader_presets Card Image](/media-cards/shader_presets.png)
shader_presets
👍 40 ⬇️ 38
Dart 3 compatibleMaintenance Status: Average
A bunch of ready to use shader presets using shader_buffers package
![live_background Card Image](/media-cards/live_background.png)
live_background
👍 39 ⬇️ 77
Dart 3 compatibleMaintenance Status: Average
Provide nice moving particle bokeh effect wall paper on your background.
glopos
👍 37 ⬇️ 27
Dart 3 compatibleMaintenance Status: Poor
View elements in a global scene through local windows. Create effects which visually connect separate UI elements.
eeffects
👍 37 ⬇️ 22
Dart 3 compatibleMaintenance Status: Poor
Flutter package containing a variety of simple 2D effects. Point Lights, Light Beams, fire and Lightning Bolts so far.
awesome_aurora_gradient
👍 37 ⬇️ 0
Dart 3 compatibleMaintenance Status: Poor
A very colourful extension to create awesome Aurora gradients.
![dynamic_background Card Image](/media-cards/dynamic_background.png)
dynamic_background
👍 35 ⬇️ 37
Dart 3 compatibleMaintenance Status: Good
Allows developers to create animated backgrounds for their Flutter apps.
umbra_cli
👍 35 ⬇️ 36
Dart 3 compatibleMaintenance Status: Poor
Umbra CLI allows Flutter developers to create their own shaders and compile them to strongly typed dart files.
![particular Card Image](/media-cards/particular.png)
particular
👍 34 ⬇️ 34
Dart 3 compatibleMaintenance Status: Good
The Particular is a high performance particle effects flutter widget.
aurora
👍 30 ⬇️ 86
Dart 3 compatibleMaintenance Status: Poor
Widget to easily create aurora gradient backgrounds for your flutter app
![parallax_bg Card Image](/media-cards/parallax_bg.png)
parallax_bg
👍 29 ⬇️ 38
Dart 3 compatibleMaintenance Status: Average
Create beautiful & interactive parallax backgrounds
![flutter_moving_background Card Image](/media-cards/flutter_moving_background.png)
flutter_moving_background
👍 27 ⬇️ 91
Dart 3 compatibleMaintenance Status: Good
A Flutter Package to create beautiful and animated backgrounds,such as gradients ,circular forms and particles
![flutter_opengl Card Image](/media-cards/flutter_opengl.png)
flutter_opengl
👍 16 ⬇️ 66
Dart 3 compatibleMaintenance Status: Average
Flutter plugin to bind a Texture widget to an OpenGL ES context. Many ShaderToy shaders can be used
foil
👍 109 ⬇️ 4
Maintenance Status: Poor
Wrap a widget with Foil, providing a rainbow shimmer that twinkles as the accelerometer moves as well as tons of neat gradient features.
gradient_widgets
👍 87 ⬇️ 1.3K
Maintenance Status: Poor
A minimal set of Flutter widgets encased with beautiful gradients.
flutter_weather_bg
👍 56 ⬇️ 31
Maintenance Status: Poor
Provide a variety of weather background animation effects, covering 15 weather types, including sunny,rain,snow...
water_drop
👍 36 ⬇️ 20
Maintenance Status: Poor
A package for creating water drops on top of your widgets.