live_background

패키지 개요

공개 정보를 바탕으로 생성한 선택 가이드입니다.

LiveBackground는 Flutter 패키지로, 앱의 배경에 동적이고 움직이는 입자 보케 효과를 추가하여 시각적으로 매력적이고 몰입감 있는 경험을 제공합니다. 부드러운 애니메이션과 사용자 정의 가능한 그라데이션을 활용해 깊이와 움직임을 시뮬레이션하며, 현대적인 UI에 적합합니다. 이 패키지는 Android, iOS, Web, macOS, Windows, Linux 등 여러 플랫폼을 지원하여 다양한 기기에서 일관된 성능을 보장합니다. pub 명령어를 통해 최소한의 설정으로 개발자는 응용 프로그램에 생생한 배경을 쉽게 통합할 수 있습니다.

사용 사례

몰입형 스플래시 화면 만들기
대시보드 시각 효과 향상
랜딩 페이지에 깊이를 더하기
애니메이션 온보딩 경험 설계
앱 미적 매력 향상

주요 기능

실시간 입자 이동
사용자 정의 블러 강도
크로스 플랫폼 호환성
부드러운 그라데이션 전환
경량이고 성능이 뛰어남
Flutter 위젯과의 간편한 통합

적합한 대상

시각적 매력이 필요한 UI 디자이너
현대의 모바일 또는 웹 앱을 개발하는 개발자
매력적인 배경 애니메이션을 필요로 하는 앱
창의적인 디지털 경험
상호작용 인터페이스 프로토타이핑

고려 사항

저사양 기기에서 성능에 영향을 미칠 수 있습니다
최적의 프레임 속도를 위해 신중한 튜닝이 필요합니다
콘텐츠가 많은 레이아웃에는 권장되지 않습니다
부드러운 색상 구성과 함께 사용하는 것이 가장 좋습니다
개별 입자에 대한 제어가 제한됨

원본 README

연결된 소스 저장소의 README 원문 스냅샷입니다. 최신 내용은 저장소에서 확인하세요.

Welcome to Live Background 👋

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

Christmas

Happy New Year

happy

Change Particle Count

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

Change Particle's velocity

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

Change Particle's min/max size

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

Usage

Add LiveBackgroundWidget() where you want

import 'package:live_background/live_background.dart';

Stack(children: [LiveBackgroundWidget(), AnyWidget()])

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
)

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

This project is MIT licensed.

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

패키지, 저장소 및 앱 카테고리 검색

패키지 설치