Search packages, repositories and app categories

ducafecatFlutter ecosystem guide
parallax_bg cover
Package detailsv2.0.1

parallax_bg

Create beautiful & interactive parallax backgrounds

AndroidiOS
pub.dev API documentation Source code
30-day downloads
20
Likes
31
Pub points
130

Install package

flutter pub add parallax_bg

Package Overview

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

ParallaxBg is a Flutter package that enables developers to create visually engaging and interactive parallax backgrounds with ease. It supports smooth layered movement based on user input or device motion, ideal for enhancing app interfaces with depth and dynamism. The package integrates seamlessly into Flutter projects and works across both Android and iOS platforms. With minimal setup, it allows for rich visual effects using gradients, images, or custom widgets as background layers.

Use cases

  • Enhancing splash screens
  • Creating immersive landing pages
  • Adding depth to mobile app UIs
  • Designing interactive storytelling interfaces

Key features

  • Smooth parallax layering
  • Support for multiple background layers
  • Device motion integration
  • Customizable animation speed
  • Cross-platform compatibility (Android & iOS)

Suitable for

  • UI designers seeking visual impact
  • Developers building engaging onboarding experiences
  • Apps requiring dynamic background effects
  • Creative digital product prototypes

Considerations

  • May impact performance on low-end devices
  • Requires careful optimization for complex scenes
  • Limited customization beyond basic parallax behavior
  • Best suited for static or slow-moving content

Original README

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

parallax_bg

Create beautiful & interactive parallax backgrounds for your apps and games.

pub package

Example Image

You can find another working example in SlideIT Mobile Game

Usage

Add following command in your pubspec.yaml & install package

parallax_bg:2.0.1

or run

flutter pub add parallax_bg

Import in your dart page

import 'package:parallax_bg/parallax_bg.dart';

Add following to create background wrapper

    ParallaxBackground(
      backgroundImage: "assets/images/galaxy.jpg",
      parallaxType: _parallaxType,
      foregroundChilds: [
        ParallaxItem(
            child: Image.asset("assets/images/planet.png"),
            offset: _planetOffset),
        ParallaxItem(
            child: Image.asset("assets/images/meteor.png"),
            offset: _meteorOffset),
      ],
      // fallback: true,
    );

Change/Add/Remove ParallaxItem for foreground items

    ParallaxItem(
    child: Image.asset("assets/images/meteor.png"),
    offset: _meteorOffset),

ParallaxBackground

PROPERTY TYPE REQUIRED DETAILS
backgroundImage string yes Image path from asset folder
foregroundChilds List yes Widgets to create foreground layers
child Widget no Child widget to draw over all parallax widgets
reverse boolean no Move foreground items in reverse direction. Default false
fallback boolean no If true render the items normally when there are no sensors available. If false, it will show a error message in visible area. Default false

ParallaxItem

PROPERTY TYPE REQUIRED DETAILS
child Widget yes Child widget to draw over background as parallax item
offset boolean no Offset values to calculate distance to move items when moving device. Need separate value for each item. Default 5

LICENSE

MIT LICENSE

Categories

Background Effects, Gradients & Shaders

Dependencies

Dependency list 1 items

Source repository

Projects using this package

No data available yet.