Parallax Sensors Bg

Get a parallax effect in the background of a page that responds to a corresponding sensor detection (Accelerometer, Gyroscope, User accelerometer, Magnetometer)

Note: Accelerometer is preferred over other sensors.

Features

• Supports 4 sensors: Accelerometer, User Accelerometer, Gyroscope, Magnetometer.
• Simplified use of image.
• Predefined filters for image: Blur and darken.
• Any widgets can be used as a layer.
• Can lock or reverse the movement of any axis.
• Many parameters for precise customization.

Getting started

Add dependency in pubspec.yaml and run flutter pub get

dependencies:
  parallax_sensors_bg: ^1.0.0

Now import the package in your code:

import 'package:parallax_sensors_bg/parallax_sensors_bg.dart';

Usage

Use it in the Scaffold body

Parallax(
  sensors: ParallaxSensor.accelerometer,
  layers: [
    Layer(
      sensitivity: 1,
      image: NetworkImage('https://example.com/background.png'),
      preventCrop: true,
      imageBlurValue: 5,
    ),
    Layer(
      sensitivity: 7,
      image: AssetImage('assets/middle_layer.png'),
      imageHeight: 500,
      imageFit: BoxFit.fitHeight,
    ),
    Layer(
      sensitivity: 12,
      child: Text('Topmost layer'),
    ),
  ]
  child: Text('Page body here'),
),

Parallax class arguments:

Layer class arguments: