A Flutter widget that moves according to a scroll controller.

Related tags

Widgets dart flutter parallax-scrolling
Overview

flutter_parallax

A Flutter widget that moves according to a scroll controller.

Pub

Features

  • Can contain any widget.
  • Configurable parallax scroll direction.
  • Customizable parallax delegate.
  • For widgets inside and outside a scroll view (list items and list backgrounds for example).

Screenshot

Getting started

In the pubspec.yaml of your flutter project, add the following dependency:

dependencies:
  ...
  flutter_parallax: "^0.1.2"

In your library add the following import:

import 'package:flutter_parallax/flutter_parallax.dart';

For help getting started with Flutter, view the online documentation.

Example

new Parallax.inside(
    child: new Image.network('https://flutter.io/images/homepage/header-illustration.png'),
    mainAxisExtent: 150.0,
);

You can find more examples in the Example project.

Constructors

  • The Parallax.inside, that computes the parallax offset from its position in its first Scrollable parent. Useful for list or grid items.
  • The Parallax.outside, that computes the parallax offset from the percentage of the scrollable's container extent. Useful for a list or grid background.
  • The Parallax.custom takes a ParallaxDelegate, which provides the ability to customize additional aspects of the child model. For example, a ParallaxDelegate can control the algorithm used to computes the parallax offset of the child within its parent.

Changelog

Please see the Changelog page to know what's recently changed.

Contributions

Feel free to contribute to this project.

If you find a bug or want a feature, but don't know how to fix/implement it, please fill an issue.
If you fixed a bug or implemented a new feature, please send a pull request.

Comments
  • Exception when integrating Parallax.inside into a Dismissible

    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)
    opened by creativecreatorormaybenot 2
  • Images are not translated correctly before the first scroll

    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

    opened by eric-taix 3
  • Null check operator used on a null value

    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
    opened by YAPEIZG 2
  • toDouble Error

    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.

    opened by Johnblundon 0
  • ParallaxOutsideDelegate Error with a ListView that is in full view

    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:

    https://github.com/letsar/flutter_parallax/blob/1918bff8028ad89d9ee66b66338b57bab8a5bfac/lib/src/rendering/parallax.dart#L298

    opened by Torrunt 0
Owner
Romain Rastel
Flutter Developer
Romain Rastel
GitHub
Flutter ScrollView Observer - a library of widget that can be used to listen for child widgets those are being displayed in the scroll view

Flutter ScrollView Observer - a library of widget that can be used to listen for child widgets those are being displayed in the scroll view

林洵锋 67 Jan 6, 2023
Custom bottom sheet widget, that can resize by drag and then scroll.

Bottom Sheet This package is part of the SurfGear toolkit made by Surf. About Custom bottom sheet widget that can be resized in response to drag gestu

Surf 92 Dec 16, 2022
A sheet that aligns to the bottom of a widget and expands as scroll up.

slinky_view A sheet that aligns to the bottom of a widget and expands as scroll up. Getting started Add dependency. dependencies: slinky_view: ^1.0.

idonun 3 Nov 21, 2022
NestedScrollView: extended nested scroll view to fix following issues.

NestedScrollView: extended nested scroll view to fix following issues.

FlutterCandies 457 Jan 4, 2023
A simple Flutter widget to add in the widget tree when you want to show nothing, with minimal impact on performance.

nil A simple widget to add in the widget tree when you want to show nothing, with minimal impact on performance. Why? Sometimes, according to a condit

Romain Rastel 127 Dec 22, 2022
A Flutter Widget to make interactive timeline widget.

Bubble Timeline Package A Flutter Widget to make interactive timeline widget. This widget can be used to make Event Timelines, or Timelines for certai

Vansh Goel 12 Sep 22, 2022
📸 Easy to use yet very customizable zoomable image widget for Flutter, Photo View provides a gesture sensitive zoomable widget.

?? Easy to use yet very customizable zoomable image widget for Flutter, Photo View provides a gesture sensitive zoomable widget. Photo View is largely used to show interacive images and other stuff such as SVG.

Blue Fire 1.7k Jan 7, 2023
A widget lib that the widget in this lib can react to flutter ScrollController's offset

Language: English | 中文简体 linked_scroll_widgets A lib full of widgets that can react to the scrollController's offset change,to custom your UI effect.

WenJingRui 8 Oct 16, 2022
Full customable rolling switch widget for flutter apps based on Pedro Massango's 'crazy-switch' widget

lite_rolling_switch Full customable rolling switch widget for flutter apps based on Pedro Massango's 'crazy-switch' widget https://github.com/pedromas

Eduardo Muñoz 48 Dec 1, 2022
Progress Dialog widget for flutter projects with ability to customize loading widget, background color and background blur.

DISCONTINUED Checkout ArsDialog ars_progress_dialog Customizable progress dialog for Flutter applications with smooth animation for background dim col

Arsam 8 Apr 15, 2022
A Flutter widget that will give a Glitch Animation Effect to it's child widget.

GlitchEffect A Flutter widget that will give a Glitch Animation Effect to it's child widget. Installation Add the latest version of package to your pu

Sameer Singh 6 Nov 25, 2022
Widget, that can make any static located widget hidable

Installing See the official installing guidline from hidable/install Usage & Overview To start using Hidable widget, we have to create a ScrollControl

Anon 18 Dec 16, 2022
A widget that allow user resize the widget with drag

Flutter-Resizable-Widget A widget that allow user resize the widget with drag Note: this widget uses Getx Example bandicam.2021-11-11.12-34-41-056.mp4

MohammadAminZamani.afshar 22 Dec 13, 2022
Flutter Carousel Pro - A Flutter Carousel widget

Carousel Extended A Flutter Carousel widget. Usage As simple as using any flutter Widget. Based on Carousel Pro but extended to be able to navigate be

omid habibi 3 Dec 7, 2020
🟥 A flutter widget that flashes when flutter fails to render a frame in a certain timeframe

?? A flutter widget that flashes when flutter fails to render a frame in a certain timeframe

Andrei Lesnitsky 32 Oct 8, 2022
React hooks for Flutter. Hooks are a new kind of object that manages a Widget life-cycles. They are used to increase code sharing between widgets and as a complete replacement for StatefulWidget.

English | Português Flutter Hooks A Flutter implementation of React hooks: https://medium.com/@dan_abramov/making-sense-of-react-hooks-fdbde8803889 Ho

Remi Rousselet 2.6k Dec 29, 2022
A credit card widget for Flutter application.

A credit card widget for Flutter application.

Simform Solutions 281 Dec 27, 2022
A simple Flutter widget library that helps us to select days in a week.

A simple Flutter widget library that helps us to select days in a week.

Shan Shaji 4 Oct 9, 2022
Flutter debug helper widget with common and custom actions

Flutter debug helper widget with common and custom actions

Stanislav Ilin 43 Dec 7, 2022