A Parallax behavior for any Flutter Scrollable
This plugin enable a parallax effect in any Scrollable
, simply wrap your Scrollable
in a ParallaxArea
and use a ParallaxWidget
inside it.
Interactive web sample Here
PageView Vertical | PageView Horizontal |
---|---|
![]() |
![]() |
ListView Vertical | ListView Horizontal |
---|---|
![]() |
![]() |
- Overlap foreground and background parallax
- Customizable magnitude of the Parallax
- Works with any
Scrollable
- Parallax vertically, horizontally or both
- Inverted parallax
This plugin relies on RenderBox calculation and Scrollable notification to move the content accordling Simply wrap any Scrollable with a ParallaxArea and use a ParallaxWidget inside your scrollable to Enable the effect
The following sample show how to add a parallax background to a PageView
:
ParallaxArea(
child: PageView.builder(
scrollDirection: Axis.vertical,
itemBuilder: (context, index) {
return ParallaxWidget(
child: Center(
child: Text(
"PAGE ${index + 1}",
style: TextStyle(
color: Colors.white,
fontSize: 40,
fontWeight: FontWeight.w900,
),
),
),
overflowWidthFactor: 1,
background: Image.asset(
"assets/background_${index % 3}.jpg",
fit: BoxFit.cover,
),
);
}),
),
Main child to be displayed, the size of the background will be matched to this child.
The widget to be placed in the background, it will be contained in a OverflowBox
and sized according to overflowWidthFactor
and overflowHeightFactor
.
The width multiplier factor, the background will be as larger as the child multiplied by the overflowWidthFactor
, increasing this value will increase the parallax effect during horizontal scroll.
Min value 1, default value 2.
The height multiplier factor, the background will be as taller as the child multiplied by the overflowHeightFactor
, increasing this value will increase the parallax effect during vertical scroll.
Min value 1, default value 2.
If true the parallax effect will be disabled for the horizontal Axis.
Default value false.
If true the parallax effect will be disabled for the vertical Axis.
Default value false.
If true the parallax effect will be inverted for both Axis.
Default value false.
Define the point where this Parallax should be centered The aligment will be relative to the parent ParallaxArea. For example if you set the Alignment.topLeft, the Background widget will be centered when the ParallaxWidget top and left will be aligned with the top and the left of the ParallaxArea parent.
default value Alignment.center
.
Define if the overflow should be clipped, if not clipped the content will overflow outside the ParallaxWidget.
Default value true.
Give the parallax a general padding, used to avoid pixel bleeding if the content doesn't cover completely the viewport.
Default value EdgeInsets.zero
.
Show some debug info like positioning on the current parallax boundary and overflows.