letsar / flutter_parallax

A Flutter widget that moves according to a scroll controller.

Hi there 👋

I'm Romain Rastel, a french mobile developer who enjoy using Flutter to build apps.

You will find here some packages I wrote to make Flutter even better.

Reach me

Sponsor me

I'm working on my packages on my free-time, but I don't have as much time as I would. If one of the pakcages I created is helping you, please consider to sponsor me. By doing so, I will prioritize your issues or your pull-requests before the others.

Github Stats

flutter_parallax's Issues

Please provide Parallax.custom example

I'm interested in using your Parallax.custom method to create a slow pan of a background image driven by an external variable. You have examples for .inside and .outside but nothing for .custom that I can find.

Thank you.

Can we obtain parallax effect on Containers in a listView.

Instead of using images I am using containers with background images.
Is there a way to get parallax effect on that. I modified your sample code to test it out. The build method changes to

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(title: new Text(widget.title)),
      body: new Stack(
        children: <Widget>[
          new ListView.builder(
            controller: _scrollController,
            itemBuilder: buildItem,
            itemCount: 10,
          ),
        ],
      ),
    );
  }

  Widget buildItem(BuildContext context, int index) {
    return new Parallax.inside(
      child: new Container(
        decoration: new BoxDecoration(
          image: new DecorationImage(
              image: new NetworkImage("https://flutter.io/images/homepage/header-illustration.png"),
              fit: BoxFit.cover),
        ),
        height: 150.0,
      ),
      mainAxisExtent: 150.0,
    );
  }

Images are not translated correctly before the first scroll

Hey, first thanks for this library.

I'm using it for card's image inside a vertical ListView and my code seems standard:

return Stack(
      children: [
        SizedBox(
          height: height,
          width: double.infinity,
          child: image != null
              ? Parallax.inside(
                  mainAxisExtent: 150,
                  child: Image.asset(
                    image,
                    fit: BoxFit.none,
                  ),
                )
              : SizedBox(),
        ),
        Container(
          height: height,
          ....

Code of a card

When I start scrolling all visible images are "jumping" and then everything works fine. Any idea?

Here is a video which demonstrates the issue (between 2s and 3s).
https://user-images.githubusercontent.com/712517/110564365-f736e680-814c-11eb-9501-10ef32ad7c51.mp4

Thanks for your help

web app issue

hey
thanks for your lib.

but it not work on web

ParallaxOutsideDelegate Error with a ListView that is in full view

I get an "Rect argument contained a NaN value" error when using Parallax.outside on a ListView that happens to be in full-view. It's an easy fix, just add && maxScrollExtent != 0 to this if statement:

flutter_parallax/lib/src/rendering/parallax.dart

Line 298 in 1918bff

if (minScrollExtent.isFinite && maxScrollExtent.isFinite) {

toDouble Error

I'm trying to use Parallax.Inside for a list with Images in a container. These are network images passed into a container, the widget works and displays fine but I'm constantly getting an error.

I/flutter (12496): size: Size(321.3, 180.0) I/flutter (12496): This RenderObject had the following descendants (showing up to depth 5): I/flutter (12496): child: RenderConstrainedBox#34785 relayoutBoundary=up7 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE I/flutter (12496): child: RenderSemanticsAnnotations#8d52f relayoutBoundary=up8 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE I/flutter (12496): child: RenderImage#f6eb8 relayoutBoundary=up9 NEEDS-PAINT

and the debug is constantly displaying the error:
I/flutter (12496): Another exception was thrown: NoSuchMethodError: The method 'toDouble' was called on null.

Using Parallax.outside with a scroll controller eliminates the "toDoube" error but does not function as well as the inside method.

Here is my code:
Parallax.inside( child: Container( constraints: BoxConstraints(minWidth: 440.0), child: Image( height: 300, image: CachedNetworkImageProvider(url), fit: BoxFit.cover, ), ), mainAxisExtent: 220, )

Any help would be greatly appreciated.

Exception when integrating Parallax.inside into a Dismissible

I/flutter: ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
I/flutter: The following assertion was thrown during performLayout():
I/flutter: 'package:flutter/src/rendering/box.dart': Failed assertion: line 1457 pos 18: 'debugDoingThisResize
I/flutter: || debugDoingThisLayout ||
I/flutter:                  (RenderObject.debugActiveLayout == parent && _size._canBeUsedByParent)': is not
I/flutter:                  true.
I/flutter: Either the assertion indicates an error in the framework itself, or we should provide substantially
I/flutter: more information in this error message to help you determine and fix the underlying cause.
I/flutter: In either case, please report this assertion by filing a bug on GitHub:
I/flutter:   https://github.com/flutter/flutter/issues/new
I/flutter: When the exception was thrown, this was the stack:
I/flutter: #2      RenderBox.size.<anonymous closure> (package:flutter/src/rendering/box.dart)
I/flutter: #3      RenderBox.size (package:flutter/src/rendering/box.dart:1463:6)
I/flutter: #4      RenderFractionalTranslation.applyPaintTransform (package:flutter/src/rendering/proxy_box.dart:2377:24)
I/flutter: #5      RenderObject.getTransformTo (package:flutter/src/rendering/object.dart:2109:24)
I/flutter: #6      RenderBox.localToGlobal (package:flutter/src/rendering/box.dart:1981:39)
I/flutter: #7      ParallaxInsideDelegate.getChildScrollRatio (package:flutter_parallax/src/rendering/parallax.dart:231:49)
I/flutter: #8      ParallaxWithAxisDirectionDelegate.getPositionForChild (package:flutter_parallax/src/rendering/parallax.dart:148:28)
I/flutter: #9      RenderParallaxSingleChildLayoutBox.performLayout (package:flutter_parallax/src/rendering/parallax.dart:340:41)
I/flutter: #10     RenderObject.layout (package:flutter/src/rendering/object.dart:1576:7)
I/flutter: #11     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13)
I/flutter: #12     _RenderCustomClip.performLayout (package:flutter/src/rendering/proxy_box.dart:1143:11)
I/flutter: #13     RenderObject.layout (package:flutter/src/rendering/object.dart:1576:7)
I/flutter: #14     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13)
I/flutter: #15     RenderObject.layout (package:flutter/src/rendering/object.dart:1576:7)
I/flutter: #16     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13)
I/flutter: #17     RenderObject.layout (package:flutter/src/rendering/object.dart:1576:7)
I/flutter: #18     _RenderProxyBox&RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:109:13)
I/flutter: #19     _RenderCustomClip.performLayout (package:flutter/src/rendering/proxy_box.dart:1143:11)
I/flutter: #20     RenderObject.layout (package:flutter/src/rendering/object.dart:1576:7)
I/flutter: #21     RenderPadding.performLayout (package:flutter/src/rendering/shifted_box.dart:199:11)
I/flutter: #22     RenderObject.layout (package:flutter/src/rendering/object.dart:1576:7)
I/flutter: #23     RenderFlex.performLayout (package:flutter/src/rendering/flex.dart:798:17)
I/flutter: #24     RenderObject._layoutWithoutResize (package:flutter/src/rendering/object.dart:1451:7)
I/flutter: #25     PipelineOwner.flushLayout (package:flutter/src/rendering/object.dart:710:18)
I/flutter: #26     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&RendererBinding.drawFrame (package:flutter/src/rendering/binding.dart:270:19)
I/flutter: #27     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&RendererBinding&WidgetsBinding.drawFrame (package:flutter/src/widgets/binding.dart:627:13)
I/flutter: #28     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&RendererBinding._handlePersistentFrameCallback (package:flutter/src/rendering/binding.dart:208:5)
I/flutter: #29     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.dart:990:15)
I/flutter: #30     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding.handleDrawFrame (package:flutter/src/scheduler/binding.dart:930:9)
I/flutter: #31     _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding._handleDrawFrame (package:flutter/src/scheduler/binding.dart:842:5)
I/flutter: #32     _invoke (dart:ui/hooks.dart:120:13)
I/flutter: #33     _drawFrame (dart:ui/hooks.dart:109:3)

Parallax without list view

Is it possible to implement parallax without the list view?

I am trying to implement the parallax in https://github.com/iminyourhouse-turnaround as an exercise.

When I use the Parallax.inside or Parallax.outside methods, I get the below error.
I don't get error with SingleChildScrollView but only the top layer scrolls.

I have attached the assets, pubspec and the main.dart

pubspec.yaml.zip
assets.zip
main.dart.zip
image-assets.dart.zip

Thanks,
Vijay

`══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
The following assertion was thrown during performLayout():
ScrollController attached to multiple scroll views.
'package:flutter/src/widgets/scroll_controller.dart': Failed assertion: line 111 pos 12:
'_positions.length == 1'

Either the assertion indicates an error in the framework itself, or we should provide substantially
more information in this error message to help you determine and fix the underlying cause.
In either case, please report this assertion by filing a bug on GitHub:
https://github.com/flutter/flutter/issues/new

When the exception was thrown, this was the stack:
#2 ScrollController.position (package:flutter/src/widgets/scroll_controller.dart:111:12)
#3 ParallaxWithAxisDirectionDelegate._getParallaxDirection (package:flutter_parallax/src/rendering/parallax.dart:164:64)
#4 ParallaxOutsideDelegate.getConstraintsForChild (package:flutter_parallax/src/rendering/parallax.dart:259:45)
#5 RenderParallaxSingleChildLayoutBox.performLayout (package:flutter_parallax/src/rendering/parallax.dart:336:56)
#6 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7)
#7 RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:107:13)
#8 _RenderCustomClip.performLayout (package:flutter/src/rendering/proxy_box.dart:1138:24)
#9 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7)
#10 RenderStack.performLayout (package:flutter/src/rendering/stack.dart:509:15)
#11 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7)
#12 MultiChildLayoutDelegate.layoutChild (package:flutter/src/rendering/custom_layout.dart:124:11)
#13 _ScaffoldLayout.performLayout (package:flutter/src/material/scaffold.dart:256:7)
#14 MultiChildLayoutDelegate._callPerformLayout (package:flutter/src/rendering/custom_layout.dart:194:7)
#15 RenderCustomMultiChildLayoutBox.performLayout (package:flutter/src/rendering/custom_layout.dart:338:14)
#16 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7)
#17 RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:107:13)
#18 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7)
#19 RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:107:13)
#20 _RenderCustomClip.performLayout (package:flutter/src/rendering/proxy_box.dart:1138:24)
#21 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7)
#22 RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:107:13)
#23 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7)
#24 RenderStack.performLayout (package:flutter/src/rendering/stack.dart:509:15)
#25 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7)
#26 RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:107:13)
#27 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7)
#28 RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:107:13)
#29 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7)
#30 RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:107:13)
#31 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7)
#32 RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:107:13)
#33 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7)
#34 RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:107:13)
#35 RenderOffstage.performLayout (package:flutter/src/rendering/proxy_box.dart:2710:26)
#36 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7)
#37 RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:107:13)
#38 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7)
#39 RenderStack.performLayout (package:flutter/src/rendering/stack.dart:509:15)
#40 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7)
#41 RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:107:13)
#42 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7)
#43 RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:107:13)
#44 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7)
#45 RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:107:13)
#46 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7)
#47 RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:107:13)
#48 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7)
#49 RenderBox&RenderObjectWithChildMixin&RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:107:13)
#50 RenderObject.layout (package:flutter/src/rendering/object.dart:1570:7)
#51 RenderView.performLayout (package:flutter/src/rendering/view.dart:142:13)
#52 RenderObject._layoutWithoutResize (package:flutter/src/rendering/object.dart:1445:7)
#53 PipelineOwner.flushLayout (package:flutter/src/rendering/object.dart:709:18)
#54 BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&RendererBinding.drawFrame (package:flutter/src/rendering/binding.dart:270:19)
#55 BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&RendererBinding&WidgetsBinding.drawFrame (package:flutter/src/widgets/binding.dart:622:22)
#56 BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&RendererBinding._handlePersistentFrameCallback (package:flutter/src/rendering/binding.dart:208:5)
#57 BindingBase&GestureBinding&ServicesBinding&SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.dart:990:15)
#58 BindingBase&GestureBinding&ServicesBinding&SchedulerBinding.handleDrawFrame (package:flutter/src/scheduler/binding.dart:930:9)
#59 BindingBase&GestureBinding&ServicesBinding&SchedulerBinding.scheduleWarmUpFrame. (package:flutter/src/scheduler/binding.dart:751:7)
#61 _Timer._runTimers (dart:isolate-patch/dart:isolate/timer_impl.dart:382)
#62 _Timer._handleMessage (dart:isolate-patch/dart:isolate/timer_impl.dart:416)
#63 _RawReceivePortImpl._handleMessage (dart:isolate-patch/dart:isolate/isolate_patch.dart:165)
(elided 3 frames from class _AssertionError and package dart:async-patch)

The following RenderObject was being processed when the exception was fired:
RenderParallaxSingleChildLayoutBox#3daa6 relayoutBoundary=up3 NEEDS-LAYOUT NEEDS-PAINT
creator: ParallaxSingleChildLayout ← ClipRect ← Parallax ← Stack ← MediaQuery ←
LayoutId-[<_ScaffoldSlot.body>] ← CustomMultiChildLayout ← DefaultTextStyle ←
AnimatedDefaultTextStyle ← _InkFeatures-[GlobalKey#37fde ink renderer] ←
NotificationListener ← PhysicalModel ← ⋯
parentData: (can use size)
constraints: BoxConstraints(0.0<=w<=375.0, 0.0<=h<=712.0)
size: Size(375.0, 712.0)
This RenderObject had the following descendants (showing up to depth 5):
RenderConstrainedBox#b5745 NEEDS-LAYOUT NEEDS-PAINT
RenderPositionedBox#d7836 NEEDS-LAYOUT NEEDS-PAINT
RenderPadding#aa770 NEEDS-LAYOUT NEEDS-PAINT
RenderConstrainedBox#f7504 NEEDS-LAYOUT NEEDS-PAINT
RenderDecoratedBox#0dd90 NEEDS-LAYOUT NEEDS-PAINT
════════════════════════════════════════════════════════════════════════════════════════════════════
Reloaded 1 of 486 libraries in 1,863ms.
`

Null check operator used on a null value

I am getting this Error:

The following _CastError was thrown during performLayout():
Null check operator used on a null value

The relevant error-causing widget was
Parallax
When the exception was thrown, this was the stack
#0      RenderSliverMultiBoxAdaptor.childMainAxisPosition
#1      RenderSliverHelpers.applyPaintTransformForBoxChild
#2      RenderSliverMultiBoxAdaptor.applyPaintTransform
#3      RenderObject.getTransformTo
#4      RenderBox.localToGlobal
...
The following RenderObject was being processed when the exception was fired: RenderParallaxSingleChildLayoutBox#a29ec NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
RenderObject: RenderParallaxSingleChildLayoutBox#a29ec NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
    parentData: <none> (can use size)
    constraints: BoxConstraints(w=428.0, h=130.0)
    size: Size(428.0, 130.0)
    child: RenderSemanticsAnnotations#bb227 relayoutBoundary=up1 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
        parentData: offset=Offset(0.0, 0.0) (can use size)
        constraints: BoxConstraints(w=428.0, 0.0<=h<=Infinity)
        size: Size(428.0, 149.5)
        child: RenderImage#ae8ff relayoutBoundary=up2 NEEDS-PAINT
            parentData: <none> (can use size)
            constraints: BoxConstraints(w=428.0, 0.0<=h<=Infinity)
            size: Size(428.0, 149.5)
            image: [750×262]
            alignment: center
            invertColors: false
            filterQuality: low

The method '-' was called on null.

I am getting this exception.

The picture is not fully displayed

The picture is not fully displayed

add flutter 3.7 support please

it a hell hole here