Animated Background In Flutter
Flutter is a portable UI toolkit. In other words, it’s a comprehensive app Software Development toolkit (SDK) that comes complete with widgets and tools. Flutter is a free and open-source tool to develop mobile, desktop, web applications. Flutter is a cross-platform development tool. This means that with the same code, we can create both ios and android apps. This is the best way to save time and resources in our entire process. In this, hot reload is gaining traction among mobile developers. Allows us to quickly see the changes implemented in the code with hot reload.
In this article, we will explore the Animated Background in flutter using the animated_background_package. With the help of the package, we can easily achieve flutter animated background. So let’s get started.
animated_background | Flutter Package
Animated Backgrounds for Flutter. Easily extended to paint whatever you want on the canvas. Note: These examples are…pub.dev
Table Of Contents :
Animated Background :
Animated background is used for animations in the background. This package contains many types of animations. Users can use animations as per their requirement. In order to define the animations, we can use custom paint to create user customized designs.
Demo Module :
Implementation :
Step 1: Add the dependencies
Add dependencies to pubspec — yaml file.
dependencies :
dependencies:animated_background: ^1.0.5
Step 2: Importing
import 'package:animated_background/animated_background.dart';Step 3: Run flutter package get
Code Implementation :
Create a new dart file called home_page.dart inside the lib folder.
First of all, we have created a home page screen in which five buttons have been created and at the click of each button, a new page will open in which we have shown the swiper list in different ways. Let us understand this in detail.
Random Behavior:
In Random Behaviour we have set its RandomParticleBehaviour inside the animated background class, inside which particle options are custom-defined in the options property. Let us understand this through a reference.
AnimatedBackground(
behaviour: RandomParticleBehaviour(
options: particleOptions,
paint: particlePaint,
),
vsync: this,
child:Center(
child: Text('Random Behavior Background',style:TextStyle(fontSize:20,
fontWeight:FontWeight.w500,fontStyle:FontStyle.italic),),
),
),
When we run the application, we ought to get the screen’s output like the underneath screen capture.
Buble Behavior:
In BubbleBehaviour we have set its behaviour bubble behaviour within the animated background class, in this, we have created a class named Bubal, in which its position radius and color is defined and the behaviour is custom made. Let us understand this through a reference.
AnimatedBackground(
behaviour: BubbleBehaviour(),
vsync: this,
child:Center(
child: Text('Bubble Behavior Background',style:TextStyle(fontSize:20,
fontWeight:FontWeight.w500,fontStyle:FontStyle.italic),),
),
When we run the application, we ought to get the screen’s output like the underneath screen capture.
Rain Behavior:
In RainParticleBehavior, its particle option and particle paint which is custom made, in which its color speed count and its radius etc. have been defined.
AnimatedBackground(
behaviour:RainParticleBehaviour(
enabled:true,
options: particleOptions,
paint: particlePaint,
),
vsync: this,
child:Center(
child: Text('Rain Behavior Background',style:TextStyle(fontSize:20,
fontWeight:FontWeight.w500,fontStyle:FontStyle.italic),),
),
),
When we run the application, we ought to get the screen’s output like the underneath screen capture.
Racing Behavior:
In RacingLinesBehaviour, the behaviour has placed its direction as left to right(ltr) and has given its line count 50 in numLines properties.
AnimatedBackground(
behaviour: RacingLinesBehaviour(
direction: _lineDirection,
numLines: _lineCount,
),
vsync: this,
child:Center(
child: Text('Racing Behavior Background',style:TextStyle(fontSize:20,
fontWeight:FontWeight.w500,fontStyle:FontStyle.italic),),
),
),
When we run the application, we ought to get the screen’s output like the underneath screen capture.
Code File:
import 'package:animated_background_demo/route/route_names.dart';
import 'package:animated_background_demo/widget/custom_button.dart';
import 'package:flutter/material.dart';
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
bool _value1 = true;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Animated Background Demo'),
centerTitle: true,
),
body: Container(
margin: EdgeInsets.only(left: 15, right: 15),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
CustomButton(
mainButtonText: 'Random Behaivor',
callbackTertiary: () {
Navigator.of(context).pushNamed
(RouteName.RandomBehaviorScreen);
},
color: Colors.green[200],
),
SizedBox(
height: 10,
),
CustomButton(
mainButtonText: 'Bubble Behavior',
callbackTertiary: () {
Navigator.of(context).pushNamed
(RouteName.BubbleBehavior);
},
color: Colors.blue[200],
),
SizedBox(
height: 10,
),
CustomButton(
mainButtonText: 'Rain Behavior',
callbackTertiary: () {
Navigator.of(context).pushNamed
(RouteName.RainBehavior);
},
color: Colors.orange[200],
),
SizedBox(
height: 10,
),
CustomButton(
mainButtonText: 'Racing Behavior',
callbackTertiary: () {
Navigator.of(context).pushNamed
(RouteName.RacingBehavior);
},
color: Colors.teal[200],
),
SizedBox(
height: 10,
),
CustomButton(
mainButtonText: 'Space Behavior',
callbackTertiary: () {
Navigator.of(context).pushNamed
(RouteName.SpaceBehavior);
},
color: Colors.green[200],
),
],
),
),
);
}
}
Conclusion:
In this article, I have explained an Animated Background in a flutter, which you can modify and experiment with according to your own, this little introduction was from the Animated Background from our side.
I hope this blog will provide you with sufficient information in Trying up the Animated Background in your flutter project. We will show you the Animated Background is?, and work on it in your flutter applications, So please try it.
❤ ❤ Thanks for reading this article ❤❤
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
Feel free to connect with us
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
