Animated Background in Flutter Last Updated : 07 Nov, 2022 Summarize Comments Improve Suggest changes Share Like Article Like Report Animated Backgrounds for Flutter is easily extended to paint whatever you want on the canvas. In this article, we are going to make an animated background with bubbles. A sample video is given below to get an idea about what we are going to do in this article. Installing Add the dependency into pubspec.yaml file. dependencies: animated_background: ^2.0.0Syntax for usage Creating ParticleOptions: Dart // Defining Particles for animation. ParticleOptions particles = const ParticleOptions( baseColor: Colors.cyan, spawnOpacity: 0.0, opacityChangeRate: 0.25, minOpacity: 0.1, maxOpacity: 0.4, particleCount: 70, spawnMaxRadius: 15.0, spawnMaxSpeed: 100.0, spawnMinSpeed: 30, spawnMinRadius: 7.0, ); Adding Widget to Body: Dart // AnimatedBackground widget AnimatedBackground( vsync: this, behaviour: RandomParticleBehaviour(options: particles), child: Center( child: Text( "Hello this is Random Animated Background", style: TextStyle(fontSize: 50), )), ), Code Example Dart import 'package:animated_background/animated_background.dart'; import 'package:flutter/material.dart'; // main class calling to // the MyAnimatedBackground. void main() { runApp(MyAnimatedBackground()); } // MyAnimatedBackground class is stateful class. class MyAnimatedBackground extends StatefulWidget { MyAnimatedBackground({Key? key}) : super(key: key); @override State<MyAnimatedBackground> createState() => _MyAnimatedBackgroundState(); } class _MyAnimatedBackgroundState extends State<MyAnimatedBackground> with SingleTicketProviderStateMixin { // definition of ParticlesOptions. ParticleOptions particles = const ParticleOptions( baseColor: Colors.cyan, spawnOpacity: 0.0, opacityChangeRate: 0.25, minOpacity: 0.1, maxOpacity: 0.4, particleCount: 70, spawnMaxRadius: 15.0, spawnMaxSpeed: 100.0, spawnMinSpeed: 30, spawnMinRadius: 7.0, ); @override Widget build(BuildContext context) { // return MaterialApp return MaterialApp( debugShowCheckedModeBanner: false, home: Scaffold( appBar: AppBar( title: Text("Animated Background"), ), // In body we have a AnimatedBackgound, // behavior RandomParticleBehaviour. body: AnimatedBackground( // vsync uses singleTicketProvider state mixin. vsync: this, behaviour: RandomParticleBehaviour(options: particles), child: Center( child: Text( // center text "Hello this is Random Animated Background", style: TextStyle(fontSize: 50), )), ), ), ); } } Explanationmain is the principal method used to run the MyAnimatedBackground Class on start.Creating Class MyAnimatedBackground is a stateful widget.Creating ParticleOptions variable particles with options given.As flutter is based on widgets we need to create one.Returning MaterialApp that takes as home Scaffold that allows using body and appearance.As a body taking Animated Background that takes Behavior the particle that we have created,Vsync to play Animation and taking as a child Center.The Center has a Text Widget with text.Output Comment More infoAdvertise with us Next Article Flutter - AnimatedBuilder Widget M ms471841 Follow Improve Article Tags : Flutter Similar Reads Flutter - AnimatedIcon Widget Animation has become a vital part of UI design, whether it be a transition from one window to another or the closing of the window, the animation plays an important role in the smooth representation of the process. Just like that when we click on the icon, it shows animation, or another icon is show 3 min read Flutter - Hinge Animation Animations are a big part of the Flutter application. It makes an app sweet to the eyes and equally user-friendly. In this article, we will discuss in detail the Hinge animations. In Flutter there are two ways to work with animations namely:A pub packageAnimated Builder WidgetIn this article, we wil 4 min read Flutter - AnimatedCrossFade Widget AnimatedCrossFade Widget creates a fade transition between two widgets when one widget is replaced by another. It is used when you need to give a fade kind of transition in between two widgets. It supports any kind of Flutter Widget like Text, Images, Icon as well as anything that is extended from t 3 min read Flutter - Animated Bottom Navigation Bar The Animated Bottom Navigation Bar widget provides extra links to navigate between different views. When an item is tapped, the onItemSelected callback is invoked with an index of the tapped item. Depending on the number of items, these items can be shown differently. The layout of items is defined 4 min read Flutter - AnimatedBuilder Widget The AnimatedBuilder widget in Flutter is a powerful utility widget that is used for creating complex animations by rebuilding a part of the widget tree in response to changes in an animation's value. It is especially useful when you want to animate properties of child widgets that cannot be directly 4 min read Animated Text in Flutter Animations make the UI more interactive and enhance the user experience. There is no limitation of creativity when it comes to animations or making the application more interactive. In Flutter, we got an easy way to display Animated text. In this article, we will see how we can animate texts using a 3 min read Like