letsar / flutter_parallax Goto Github PK
View Code? Open in Web Editor NEWA Flutter widget that moves according to a scroll controller.
License: MIT License
A Flutter widget that moves according to a scroll controller.
License: MIT License
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.
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
it a hell hole here
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:
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,
);
}
The picture is not fully displayed
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
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.
`
hey
thanks for your lib.
but it not work on web
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.
I am getting this exception.
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)
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.