Animated Backgrounds in Flutter: A Complete Guide

If you’re looking to add an animated background to your Flutter app, you can use the animated_background package or custom animations using widgets like Stack, AnimatedContainer, and Lottie.

1. Using animated_background Package

The animated_background package allows you to create particle-based animated backgrounds.

Installation

Add the package to your pubspec.yaml file:

dependencies:
  animated_background: ^2.0.0

Example Usage

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: AnimatedBackgroundScreen(),
    );
  }
}

class AnimatedBackgroundScreen extends StatefulWidget {
  @override
  _AnimatedBackgroundScreenState createState() => _AnimatedBackgroundScreenState();
}

class _AnimatedBackgroundScreenState extends State<AnimatedBackgroundScreen> with TickerProviderStateMixin {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: AnimatedBackground(
        behaviour: RandomParticleBehaviour(),
        vsync: this,
        child: Center(
          child: Text(
            'Animated Background',
            style: TextStyle(fontSize: 24, color: Colors.white),
          ),
        ),
      ),
    );
  }
}

2. Using Lottie Animations

You can use the lottie package to play JSON-based animations.

Installation

dependencies:
  lottie: ^2.6.0

Example Usage

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Stack(
          children: [
            Lottie.asset(
              'assets/animation.json', // Replace with your Lottie file
              fit: BoxFit.cover,
              width: double.infinity,
              height: double.infinity,
            ),
            Center(
              child: Text(
                'Lottie Animated Background',
                style: TextStyle(fontSize: 24, color: Colors.white),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Download free Lottie animations from LottieFiles.

3. Using ShaderMask and AnimatedContainer

If you want gradient background animations, you can animate AnimatedContainer or ShaderMask.

Example

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: AnimatedGradientBackground(),
    );
  }
}

class AnimatedGradientBackground extends StatefulWidget {
  @override
  _AnimatedGradientBackgroundState createState() => _AnimatedGradientBackgroundState();
}

class _AnimatedGradientBackgroundState extends State<AnimatedGradientBackground> {
  List<Color> colors = [Colors.blue, Colors.purple, Colors.red, Colors.orange];
  int index = 0;

  @override
  void initState() {
    super.initState();
    Timer.periodic(Duration(seconds: 3), (timer) {
      setState(() {
        index = (index + 1) % colors.length;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: AnimatedContainer(
        duration: Duration(seconds: 3),
        decoration: BoxDecoration(
          gradient: LinearGradient(
            colors: [colors[index], colors[(index + 1) % colors.length]],
            begin: Alignment.topLeft,
            end: Alignment.bottomRight,
          ),
        ),
        child: Center(
          child: Text(
            'Gradient Animated Background',
            style: TextStyle(fontSize: 24, color: Colors.white),
          ),
        ),
      ),
    );
  }
}

---

Which One Should You Choose?

✅ Use animated_background if you need particle effects.
✅ Use Lottie if you want smooth, pre-designed animations.
✅ Use AnimatedContainer for simple gradient transitions.

Steps to Run the Code on Your Device:

1. Install Flutter (if not installed) → Flutter Installation Guide
2. Create a new Flutter project: shCopyflutter create animated_background_demo cd animated_background_demo
3. Add dependencies to pubspec.yaml:
   • animated_background: ^2.0.0
   • lottie: ^2.6.0 (if using Lottie)
4. Replace main.dart with one of the examples above.
5. Run the app using: shCopyflutter run

If you’re looking for a quick demo, I can also generate a GIF or video preview for you. Let me know how you’d like to proceed! 🚀

Related Articles

• How to make Ludo app in Flutter with Source Code Step by step
• How to make PDF Reader app in Flutter with Source Code Step by step
• How to make QR Scanner app in Flutter with Source Code Step by step
• How to Make a ToDo App with Flutter with source Code StepWise in 2024
• What is package in Flutter (Dart) with example in 2024
• What is class in Flutter(Dart) with example step by step
• Advantage of Flutter with examples in 2024
• Top 15 Amazing Applications Built with Flutter Framework
• Specialized PDF reader designed specifically for music sheets
• Christmas Quote Generator app built with flutter source code
• How to make review and rating ui with flutter stepwise
• Create custom social login button Google, Facebook and Apple ui

Would you like help integrating any of these into your Flutter project? 🚀