parallax_sensors_bg 1.0.1 icon indicating copy to clipboard operation
parallax_sensors_bg: ^1.0.1 copied to clipboard

Flutter package to simplify giving a parallax effect in the background of a page that responds to a corresponding sensor detection.

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

  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

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

Parallax class arguments: #

sensorParallaxSensorParallaxSensor.accelerometerType of the sensor whose detected values will be used for parallax movement. (accelerometer, userAccelerometer, gyroscope, magnetometer).
layersList<Layer>requiredIndividual layers for the parallax effect. The declaration of the layers sequentially are positioned from bottom to top (Farthest to nearest from parallax perspective).
reverseVerticalAxisboolfalseReverses the movement of vertical axis.
reverseHorizontalAxisboolfalseReverses the movement of horizontal axis.
lockVerticalAxisboolfalseStops the movement of vertical axis.
lockHorizontalAxisboolfalseStops the movement of horizontal axis.
animationDurationint300The duration in milliseconds it takes for the movement change to complete. Ideal value is from 200 to 400.
childWidget?nullThe fixed body of the page, above the parallax layer.

Layer class arguments: #

sensitivitydoublerequiredMoving sensitivity of the layer.
offsetOffset?nullPosition of the layer from the center.
imageImageProvider<Object>?nullImage that the layer will show. By default, the image will take the size of the screen.
imageFitBoxFitBoxFit.coverBoxFit type of the image.
imageHeightdouble?nullHeight of the image.
imageWidthdouble?nullWidth of the image.
preventCropboolfalseIf set to true, it will ignore the imageHeight and imageWidth if given and will set the height and width of the image slightly more than the screen size such that it doesn't get cropped even at the extreme value of the sensor.
imageBlurValuedouble?nullBlurs the image. Value can be any positive fractional number.
imageDarkenValuedouble?nullDarkens the image. Value ranges from 0 to 1.
opacitydouble?nullOpacity of the layer. Value ranges from 0 to 1.
pub points


unverified uploader

Flutter package to simplify giving a parallax effect in the background of a page that responds to a corresponding sensor detection.

Repository (GitHub)
View/report issues


API reference


Icon for licenses.MIT (LICENSE)


flutter, sensors_plus


Packages that depend on parallax_sensors_bg