Search packages, repositories and app categories

ducafecatFlutter ecosystem guide
live_background cover
Package detailsv0.1.3

live_background

Provide nice moving particle bokeh effect wall paper on your background.

AndroidiOSWebmacOSWindowsLinux
pub.dev API documentation Source code
30-day downloads
31
Likes
40
Pub points
150

Install package

flutter pub add live_background

Package Overview

Package selection guidance compiled from public package information, community data, and project usage.

LiveBackground is a Flutter package that adds dynamic, moving particle bokeh effects to your app's background, creating a visually engaging and immersive experience. It leverages smooth animations and customizable gradients to simulate depth and motion, ideal for modern UIs. The package supports multiple platforms including Android, iOS, Web, macOS, Windows, and Linux, ensuring consistent performance across devices. With minimal setup via the pub command, developers can easily integrate lifelike backgrounds into their applications.

Use cases

  • Creating immersive splash screens
  • Enhancing dashboard visuals
  • Adding depth to landing pages
  • Designing animated onboarding experiences
  • Improving app aesthetic appeal

Key features

  • Real-time particle movement
  • Customizable bokeh intensity
  • Cross-platform compatibility
  • Smooth gradient transitions
  • Lightweight and performant
  • Easy integration with Flutter widgets

Suitable for

  • UI designers seeking visual flair
  • Developers building modern mobile or web apps
  • Apps requiring engaging background animations
  • Creative digital experiences
  • Prototyping interactive interfaces

Considerations

  • May impact performance on low-end devices
  • Requires careful tuning for optimal frame rates
  • Not recommended for content-heavy layouts
  • Best used with subtle color schemes
  • Limited control over individual particles

Original README

Original README snapshot from the linked source repository. Visit the repository for the latest content.

Welcome to Live Background 👋

Version License: MIT Provide nice moving wall paper on your background.

title

This repository is inspired by miickel/flutter_particle_clock.

And the code of this repository is based on miickel/flutter_particle_clock

Install

Add live_background dependency on your pubspec.yaml file

live_background: ^{latest version}

Show Case

  1. Christmas
  1. Happy New Year

happy

  1. Change Particle Count

https://user-images.githubusercontent.com/7719604/207383901-491692c5-52c8-4429-8c80-0f1380ede8d3.mp4

  1. Change Particle's velocity

https://user-images.githubusercontent.com/7719604/207384180-10b8c128-e15a-492b-831a-b3b7025bad60.mp4

  1. Change Particle's min/max size

https://user-images.githubusercontent.com/7719604/207384463-5e63c237-8b0b-486f-bc3d-fe562d0119e8.mp4

Usage

  1. Add LiveBackgroundWidget() where you want
import 'package:live_background/live_background.dart';

Stack(children: [LiveBackgroundWidget(), AnyWidget()])
  1. You can use initial values to change the effect
//for example
LiveBackgroundWidget(
   palette: Palette(colors: [Colors.red, Colors.green]),
   velocityX: 2.5,
   velocityY: 0,
   particleMinSize: 10,
   particleMaxSize: 30,
   particleCount: 250,
   blurSigmaX: 3,
   blurSigmaY: 4.5,
   clipBoundary: true //default value is true
)
  1. You can change values dynamically using LiveBackgroundController.
 final liveBackgroundController = LiveBackgroundController();

LiveBackgroundWidget(
  controller: liveBackgroundController,
  palette: _palette,
)

liveBackgroundController.setParticleCount(400);
liveBackgroundController.setVelocity(2.0, 10.5);
liveBackgroundController.setParticleSize(10, 30);
liveBackgroundController.setPalette(Palette(colors: [Colors.yellow, Colors.white]))

Author

👤 Bansook Nam

  • Website: https://github.com/bansooknam
  • Github: @bansooknam

🤝 Contributing

Contributions, issues and feature requests are welcome!

Feel free to check issues page. You can also take a look at the [contributing guide](Contributions, issues and feature requests are welcome.).

Show your support

Give a ⭐️ if this project helped you!

📝 License

Copyright © 2020 Bansook Nam.

This project is MIT licensed.

This README was generated with ❤️ by readme-md-generator

Categories

Background Effects, Gradients & Shaders

Source repository

Projects using this package

No data available yet.