Search packages, repositories and app categories

GitHub repositorykumar-aakash86/parallax_bg

parallax_bg

Create beautiful & interactive parallax backgrounds.

parallax_bg project cover
Stars
7
Forks
3
Last push (UTC)
Dec 29, 2023
Project status
Active

Original README

English project snapshot. Visit GitHub 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

Aakash Kumar GitHub avatar
GitHub author

Aakash Kumar ↗

Creator of Easy Html & Mockup Builder. Full stack software engineer with experience in Android, JS, Bootstrap, CSS3, jQuery, Angular, IONIC, PhoneGap & RN.

LanguagesDartKotlinSwiftRubyObjective-C

Packages published by this repository

Dependencies used

Dependency list 3 items

  • flutter{"sdk":"flutter"}
  • sensors_plus^1.2.1
  • flutter_testDevelopment{"sdk":"flutter"}

How do I choose a repository?

Start with your use case, compare repository activity, and check the original project before adopting it.

  1. Search by repository name, owner or description, then narrow the results by topic.
  2. Compare stars, forks and recent pushes. Stars show community interest, not a guarantee of quality.
  3. Read the README, license and issues on GitHub before using a project.

Sources and maintenance

“A repository is the most basic element of GitHub.”

GitHub Docs — About repositories ↗