A Flutter widget that paints an image and moves it at a slower speed than the main scrolling content.

Related tags

Image flutter parallax-scrolling dartlang
Overview

A Flutter widget that paints an image and moves it at a slower speed than the main scrolling content.

demo.gif

Installation

Add dependency to your pubspec.yaml:

dependencies:
  parallax_image: [latest version]

Usage

ParallaxImage can be used with any Scrollable (ListView for instance). When created, it subscribes to scroll updates on nearest Scrollable ancestor. It is also possible to specify custom ScrollController in which case this widget subscribes to updates on ScrollController.position (assumes that controller is attached to only one Scrollable).

class MyWidget extends StatefulWidget {
  @override
  MyWidgetState createState() => new MyWidgetState();
}

class MyWidgetState extends State<MyWidget> {
  final _controller = new ScrollController();

  @override
  Widget build(BuildContext context) {
    return new ListView(controller: _controller, children: [
      new ParallaxImage(
        image: new AssetImage('images/january.jpg'),
        // Extent of this widget in scroll direction.
        // In this case it is vertical scroll so extent defines
        // the height of this widget.
        // The image is scaled with BoxFit.fitWidth which makes it
        // occupy full width of this widget.
        // After image is scaled it should normally have height greater
        // than this value to allow for parallax effect to be
        // visible.
        extent: 100.0,
        // Optionally specify child widget.
        child: new Text('January'),
        // Optinally specify scroll controller.
        controller: _controller,
      ),
      // ...add more list items
    ]);
  }
}

See example/ folder for a complete demo.

Features and bugs

Please file feature requests and bugs at the issue tracker.

You might also like...

A Flutter image editor with support for paint, text, filters, emojis, stickers and more

A Flutter image editor with support for paint, text, filters, emojis, stickers and more

Flutter Image Editor Plugin with simple, easy support for image editing using Paints, Text, Filters, Emoji and Sticker like stories.

Dec 22, 2022

A simple Flutter Package to Mimic iMessage Image Picker for Flutter

A simple Flutter Package to Mimic iMessage Image Picker for Flutter

A simple Flutter Package to Mimic iMessage Image Picker for Flutter

Dec 26, 2022

Image caching system for flutter

image_cacheing image_cacheing is an image caching package. It is currently tested for Android applications. ImageCacheing widget takes url as a param.

May 31, 2021

A flutter tool to generate beautiful code snippets in the form of an image.

A flutter tool to generate beautiful code snippets in the form of an image.

A flutter tool to generate beautiful code snippets in the form of an image.

Jan 18, 2022

Flutter Image Upload From Gallery

Image Upload From Gallery Image upload from gallery to Backend Dependencies image_picker: ^0.8.4+1 http: ^0.13.3 dio: ^4.0.0 Getting Started Image upl

Oct 6, 2021

Multi image pixker using the image_picker package in flutter

multi_image_selection A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you st

Oct 13, 2021

flutter image demo 主要展示图片与动画处理的案例。比如：网络图片加载、图片预览、图片缩放、json动画处理等等。

flutter image demo 主要展示图片与动画处理的案例。比如：网络图片加载、图片预览、图片缩放、json动画处理等等。

flutter_image_demo flutter image demo 主要展示图片与动画处理的案例。 比如：网络图片加载、图片预览、图片缩放、json动画处理等等。 本项目使用到以下插件： cached_network_image、 photo_view 、 lottie 、 flutter_

Feb 27, 2022

Flutter Package to Pick Image From Gallery or Camera

Flutter Package to Pick Image From Gallery or Camera

image_picker_gallery_camera Flutter Package to Pick Image From Gallery or Camera Getting Started A Flutter plugin for iOS and Android for picking imag

Oct 5, 2022

A flutter package for image carousels.

A flutter package for image carousels.

flutter_image_carousel A flutter package for image carousels. Supports both Asset and Network images. Example new ImageCarousel( ImageProvider[

Aug 9, 2021
Comments

  • "The getter 'position' was called on null"

    Hi, I get the error "The getter 'position' was called on null" during the transition when I combine ParallaxImage with Hero transition. The error message goes away after the animation.

    Like below:

    Hero( tag: 'hero', child: ClipRRect( borderRadius: BorderRadius.vertical(top: Radius.circular(5.0)), child: ParallaxImage( image: AssetImage('lib/images/tile.jpg'), extent: 300, ), ), )

    Please help.

    Thanks!

    opened by henryla92 12
  • Can't run after flutter upgrade (Version solving failed)

    Can't run after flutter upgrade (Version solving failed)

    Log: Because app depends on parallax_image >=0.2.0 <0.3.1 which requires SDK version >=2.0.0-dev <2.0.0, version solving failed.

    Recommend updating the constraint to

    environment:
   sdk: '>=2.0.0-dev.68.0 <23.0.0'

    or something.

    Thanks for the plugin btw!

    opened by Gyoko 1
  • Migrated to Null Safety and AndroidX

    Migrated to Null Safety and AndroidX

    Hello,

    I have updated codebase to support sound null Safety for Latest version of Flutter 2.2.3, Example also updated with AndroidX Implemenation,

    @pulyaevskiy can you check and review the same,we need this plugin to update for some of our projects

    Regards,

    opened by SurajLad 0
  • Does not work in grid

    Does not work in grid

    The library works great with ListView, But when I try it with grid it does not occupy entire space.

    Another thing I get null pointer The getter 'position' was called on null.

    device-2019-05-16-124301

    I/flutter (11340): ══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY ╞═══════════════════════════════════════════════════════════ I/flutter (11340): The following NoSuchMethodError was thrown building ParallaxImage(extent: 150.0, image: I/flutter (11340): AdvancedNetworkImage("https://placeimg.com/640/480/animals/sepia",scale: 1.0,header: I/flutter (11340): null,useDiskCache: true,retryLimit: 5,retryDuration: 0:00:00.500000,retryDurationFactor: I/flutter (11340): 1.5,timeoutDuration: 0:00:05.000000), color: null, dirty, dependencies: [MediaQuery]): I/flutter (11340): The getter 'position' was called on null. I/flutter (11340): Receiver: null I/flutter (11340): Tried calling: position I/flutter (11340): I/flutter (11340): When the exception was thrown, this was the stack: I/flutter (11340): #0 Object.noSuchMethod (dart:core-patch/object_patch.dart:50:5) I/flutter (11340): #1 ParallaxImage.build (package:parallax_image/parallax_image.dart:70:34) I/flutter (11340): #2 StatelessElement.build (package:flutter/src/widgets/framework.dart:3789:28) I/flutter (11340): #3 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3739:15) I/flutter (11340): #4 Element.rebuild (package:flutter/src/widgets/framework.dart:3565:5) I/flutter (11340): #5 ComponentElement._firstBuild (package:flutter/src/widgets/framework.dart:3722:5) I/flutter (11340): #6 ComponentElement.mount (package:flutter/src/widgets/framework.dart:3717:5) I/flutter (11340): #7 Element.inflateWidget (package:flutter/src/widgets/framework.dart:2961:14) I/flutter (11340): #8 Element.updateChild (package:flutter/src/widgets/framework.dart:2764:12) I/flutter (11340): #9 SingleChildRenderObjectElement.mount (package:flutter/src/widgets/framework.dart:4876:14) I/flutter (11340): #10 Element.inflateWidget (package:flutter/src/widgets/framework.dart:2961:14) I/flutter (11340): #11 Element.updateChild (package:flutter/src/widgets/framework.dart:2764:12) I/flutter (11340): #12 SingleChildRenderObjectElement.mount (package:flutter/src/widgets/framework.dart:4876:14) I/flutter (11340): #13 Element.inflateWidget (package:flutter/src/widgets/framework.dart:2961:14) I/flutter (11340): #14 Element.updateChild (package:flutter/src/widgets/framework.dart:2764:12) I/flutter (11340): #15 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3750:16) I/flutter (11340): #16 Element.rebuild (package:flutter/src/widgets/framework.dart:3565:5) I/flutter (11340): #17 ComponentElement._firstBuild (package:flutter/src/widgets/framework.dart:3722:5) I/flutter (11340): #18 ComponentElement.mount (package:flutter/src/widgets/framework.dart:3717:5) I/flutter (11340): #19 Element.inflateWidget (package:flutter/src/widgets/framework.dart:2961:14) I/flutter (11340): #20 Element.updateChild (package:flutter/src/widgets/framework.dart:2764:12) I/flutter (11340): #21 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3750:16) I/flutter (11340): #22 Element.rebuild (package:flutter/src/widgets/framework.dart:3565:5) I/flutter (11340): #23 ComponentElement._firstBuild (package:flutter/src/widgets/framework.dart:3722:5) I/flutter (11340): #24 ComponentElement.mount (package:flutter/src/widgets/framework.dart:3717:5) I/flutter (11340): #25 ParentDataElement.mount (package:flutter/src/widgets/framework.dart:4063:11) I/flutter (11340): #26 Element.inflateWidget (package:flutter/src/widgets/framework.dart:2961:14) I/flutter (11340): #27 MultiChildRenderObjectElement.mount (package:flutter/src/widgets/framework.dart:4982:32) I/flutter (11340): #28 Element.inflateWidget (package:flutter/src/widgets/framework.dart:2961:14) I/flutter (11340): #29 Element.updateChild (package:flutter/src/widgets/framework.dart:2764:12) I/flutter (11340): #30 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3750:16) I/flutter (11340): #31 Element.rebuild (package:flutter/src/widgets/framework.dart:3565:5) I/flutter (11340): #32 ComponentElement._firstBuild (package:flutter/src/widgets/framework.dart:3722:5) I/flutter (11340): #33 ComponentElement.mount (package:flutter/src/widgets/framework.dart:3717:5) I/flutter (11340): #34 Element.inflateWidget (package:flutter/src/widgets/framework.dart:2961:14) I/flutter (11340): #35 Element.updateChild (package:flutter/src/widgets/framework.dart:2764:12) I/flutter (11340): #36 SingleChildRenderObjectElement.mount (package:flutter/src/widgets/framework.dart:4876:14) I/flutter (11340): #37 Element.inflateWidget (package:flutter/src/widgets/framework.dart:2961:14) I/flutter (11340): #38 Element.updateChild (package:flutter/src/widgets/framework.dart:2764:12) I/flutter (11340): #39 SingleChildRenderObjectElement.mount (package:flutter/src/widgets/framework.dart:4876:14) I/flutter (11340): #40 Element.inflateWidget (package:flutter/src/widgets/framework.dart:2961:14) I/flutter (11340): #41 Element.updateChild (package:flutter/src/widgets/framework.dart:2764:12) I/flutter (11340): #42 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3750:16) I/flutter (11340): #43 Element.rebuild (package:flutter/src/widgets/framework.dart:3565:5) I/flutter (11340): #44 ComponentElement._firstBuild (package:flutter/src/widgets/framework.dart:3722:5) I/flutter (11340): #45 StatefulElement._firstBuild (package:flutter/src/widgets/framework.dart:3864:11) I/flutter (11340): #46 ComponentElement.mount (package:flutter/src/widgets/framework.dart:3717:5) I/flutter (11340): #47 Element.inflateWidget (package:flutter/src/widgets/framework.dart:2961:14) I/flutter (11340): #48 Element.updateChild (package:flutter/src/widgets/framework.dart:2764:12) I/flutter (11340): #49 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3750:16) I/flutter (11340): #50 Element.rebuild (package:flutter/src/widgets/framework.dart:3565:5) I/flutter (11340): #51 ComponentElement._firstBuild (package:flutter/src/widgets/framework.dart:3722:5) I/flutter (11340): #52 ComponentElement.mount (package:flutter/src/widgets/framework.dart:3717:5) I/flutter (11340): #53 Element.inflateWidget (package:flutter/src/widgets/framework.dart:2961:14) I/flutter (11340): #54 Element.updateChild (package:flutter/src/widgets/framework.dart:2764:12) I/flutter (11340): #55 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3750:16) I/flutter (11340): #56 Element.rebuild (package:flutter/src/widgets/framework.dart:3565:5) I/flutter (11340): #57 ComponentElement._firstBuild (package:flutter/src/widgets/framework.dart:3722:5) I/flutter (11340): #58 StatefulElement._firstBuild (package:flutter/src/widgets/framework.dart:3864:11) I/flutter (11340): #59 ComponentElement.mount (package:flutter/src/widgets/framework.dart:3717:5) I/flutter (11340): #60 Element.inflateWidget (package:flutter/src/widgets/framework.dart:2961:14) I/flutter (11340): #61 Element.updateChild (package:flutter/src/widgets/framework.dart:2764:12) I/flutter (11340): #62 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3750:16) I/flutter (11340): #63 Element.rebuild (package:flutter/src/widgets/framework.dart:3565:5) I/flutter (11340): #64 ComponentElement._firstBuild (package:flutter/src/widgets/framework.dart:3722:5) I/flutter (11340): #65 ComponentElement.mount (package:flutter/src/widgets/framework.dart:3717:5) I/flutter (11340): #66 Element.inflateWidget (package:flutter/src/widgets/framework.dart:2961:14) I/flutter (11340): #67 Element.updateChild (package:flutter/src/widgets/framework.dart:2764:12) I/flutter (11340): #68 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3750:16) I/flutter (11340): #69 Element.rebuild (package:flutter/src/widgets/framework.dart:3565:5) I/flutter (11340): #70 ComponentElement._firstBuild (package:flutter/src/widgets/framework.dart:3722:5) I/flutter (11340): #71 StatefulElement._firstBuild (package:flutter/src/widgets/framework.dart:3864:11) I/flutter (11340): #72 ComponentElement.mount (package:flutter/src/widgets/framework.dart:3717:5) I/flutter (11340): #73 Element.inflateWidget (package:flutter/src/widgets/framework.dart:2961:14) I/flutter (11340): #74 Element.updateChild (package:flutter/src/widgets/framework.dart:2764:12) I/flutter (11340): #75 SingleChildRenderObjectElement.mount (package:flutter/src/widgets/framework.dart:4876:14) I/flutter (11340): #76 Element.inflateWidget (package:flutter/src/widgets/framework.dart:2961:14) I/flutter (11340): #77 Element.updateChild (package:flutter/src/widgets/framework.dart:2764:12) I/flutter (11340): #78 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3750:16) I/flutter (11340): #79 Element.rebuild (package:flutter/src/widgets/framework.dart:3565:5) I/flutter (11340): #80 ComponentElement._firstBuild (package:flutter/src/widgets/framework.dart:3722:5) I/flutter (11340): #81 ComponentElement.mount (package:flutter/src/widgets/framework.dart:3717:5) I/flutter (11340): #82 Element.inflateWidget (package:flutter/src/widgets/framework.dart:2961:14) I/flutter (11340): #83 Element.updateChild (package:flutter/src/widgets/framework.dart:2764:12) I/flutter (11340): #84 SingleChildRenderObjectElement.mount (package:flutter/src/widgets/framework.dart:4876:14) I/flutter (11340): #85 Element.inflateWidget (package:flutter/src/widgets/framework.dart:2961:14) I/flutter (11340): #86 Element.updateChild (package:flutter/src/widgets/framework.dart:2764:12) I/flutter (11340): #87 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3750:16) I/flutter (11340): #88 Element.rebuild (package:flutter/src/widgets/framework.dart:3565:5) I/flutter (11340): #89 ComponentElement._firstBuild (package:flutter/src/widgets/framework.dart:3722:5) I/flutter (11340): #90 StatefulElement._firstBuild (package:flutter/src/widgets/framework.dart:3864:11) I/flutter (11340): #91 ComponentElement.mount (package:flutter/src/widgets/framework.dart:3717:5) I/flutter (11340): #92 Element.inflateWidget (package:flutter/src/widgets/framework.dart:2961:14) I/flutter (11340): #93 Element.updateChild (package:flutter/src/widgets/framework.dart:2764:12) I/flutter (11340): #94 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3750:16) I/flutter (11340): #95 Element.rebuild (package:flutter/src/widgets/framework.dart:3565:5) I/flutter (11340): #96 ComponentElement._firstBuild (package:flutter/src/widgets/framework.dart:3722:5) I/flutter (11340): #97 StatefulElement._firstBuild (package:flutter/src/widgets/framework.dart:3864:11) I/flutter (11340): #98 ComponentElement.mount (package:flutter/src/widgets/framework.dart:3717:5) I/flutter (11340): #99 Element.inflateWidget (package:flutter/src/widgets/framework.dart:2961:14) I/flutter (11340): #100 Element.updateChild (package:flutter/src/widgets/framework.dart:2764:12) I/flutter (11340): #101 SingleChildRenderObjectElement.mount (package:flutter/src/widgets/framework.dart:4876:14) I/flutter (11340): #102 Element.inflateWidget (package:flutter/src/widgets/framework.dart:2961:14) I/flutter (11340): #103 Element.updateChild (package:flutter/src/widgets/framework.dart:2764:12) I/flutter (11340): #104 SingleChildRenderObjectElement.mount (package:flutter/src/widgets/framework.dart:4876:14) I/flutter (11340): #105 Element.inflateWidget (package:flutter/src/widgets/framework.dart:2961:14) I/flutter (11340): #106 Element.updateChild (package:flutter/src/widgets/framework.dart:2764:12) I/flutter (11340): #107 SingleChildRenderObjectElement.mount (package:flutter/src/widgets/framework.dart:4876:14) I/flutter (11340): #108 Element.inflateWidget (package:flutter/src/widgets/framework.dart:2961:14) I/flutter (11340): #109 Element.updateChild (package:flutter/src/widgets/framework.dart:2764:12) I/flutter (11340): #110 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3750:16) I/flutter (11340): #111 Element.rebuild (package:flutter/src/widgets/framework.dart:3565:5) I/flutter (11340): #112 ComponentElement._firstBuild (package:flutter/src/widgets/framework.dart:3722:5) I/flutter (11340): #113 ComponentElement.mount (package:flutter/src/widgets/framework.dart:3717:5) I/flutter (11340): #114 ParentDataElement.mount (package:flutter/src/widgets/framework.dart:4063:11) I/flutter (11340): #115 Element.inflateWidget (package:flutter/src/widgets/framework.dart:2961:14) I/flutter (11340): #116 Element.updateChild (package:flutter/src/widgets/framework.dart:2764:12) I/flutter (11340): #117 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3750:16) I/flutter (11340): #118 Element.rebuild (package:flutter/src/widgets/framework.dart:3565:5) I/flutter (11340): #119 ComponentElement._firstBuild (package:flutter/src/widgets/framework.dart:3722:5) I/flutter (11340): #120 StatefulElement._firstBuild (package:flutter/src/widgets/framework.dart:3864:11) I/flutter (11340): #121 ComponentElement.mount (package:flutter/src/widgets/framework.dart:3717:5) I/flutter (11340): #122 Element.inflateWidget (package:flutter/src/widgets/framework.dart:2961:14) I/flutter (11340): #123 Element.updateChild (package:flutter/src/widgets/framework.dart:2764:12) I/flutter (11340): #124 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3750:16) I/flutter (11340): #125 Element.rebuild (package:flutter/src/widgets/framework.dart:3565:5) I/flutter (11340): #126 ComponentElement._firstBuild (package:flutter/src/widgets/framework.dart:3722:5) I/flutter (11340): #127 StatefulElement._firstBuild (package:flutter/src/widgets/framework.dart:3864:11) I/flutter (11340): #128 ComponentElement.mount (package:flutter/src/widgets/framework.dart:3717:5) I/flutter (11340): #129 Element.inflateWidget (package:flutter/src/widgets/framework.dart:2961:14) I/flutter (11340): #130 Element.updateChild (package:flutter/src/widgets/framework.dart:2764:12) I/flutter (11340): #131 RenderObjectElement.updateChildren (package:flutter/src/widgets/framework.dart:4659:32) I/flutter (11340): #132 MultiChildRenderObjectElement.update (package:flutter/src/widgets/framework.dart:4992:17) I/flutter (11340): #133 Element.updateChild (package:flutter/src/widgets/framework.dart:2753:15) I/flutter (11340): #134 _TheatreElement.update (package:flutter/src/widgets/overlay.dart:607:16) I/flutter (11340): #135 Element.updateChild (package:flutter/src/widgets/framework.dart:2753:15) I/flutter (11340): #136 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3750:16) I/flutter (11340): #137 Element.rebuild (package:flutter/src/widgets/framework.dart:3565:5) I/flutter (11340): #138 BuildOwner.buildScope (package:flutter/src/widgets/framework.dart:2278:33) I/flutter (11340): #139 _WidgetsFlutterBinding&BindingBase&GestureBinding&ServicesBinding&SchedulerBinding&PaintingBinding&SemanticsBinding&RendererBinding&WidgetsBinding.drawFrame (package:flutter/src/widgets/binding.dart:700:20)

    opened by ManojMM026 0
Owner
Anatoly Pulyaevskiy
Anatoly Pulyaevskiy
GitHub
Flutter package for Image Carousel It is an image carousel widget.

Snapshot Carousel Flutter package for Image Carousel It is an image carousel widget. Supported platforms Flutter Android Flutter iOS Flutter web Flutt

Mrigank Anand 12 Jun 3, 2021
A powerful official extension library of image, which support placeholder(loading)/ failed state, cache network, zoom pan image, photo view, slide out page, editor(crop,rotate,flip), paint custom etc.

extended_image Language: English| 中文简体 A powerful official extension library of image, which support placeholder(loading)/ failed state, cache network

FlutterCandies 1.6k Dec 31, 2022
📸 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.

Flutter Photo View A simple zoomable image/content widget for Flutter. PhotoView enables images to become able to zoom and pan with user gestures such

Fire Slime Games 1.7k Jan 3, 2023
Crop any widget/image in Android, iOS, Web and Desktop with fancy and customizable UI, in pure Dart code.

crop A Flutter package for cropping any widget, not only images. This package is entirely written in Dart and supports Android, iOS, Web and Desktop.

Mahdi 225 Jan 6, 2023
A flutter package to convert any widget to an Image.

Davinci A package to convert any widget to an image which can be saved locally or can be shared to other apps and chats. ?? Preview ℹ️ Usage Prerequis

Sai Gokula Krishnan 37 Dec 20, 2022
Build a fancy looking avatar widget with a colorfull ring around the image

Build a fancy looking avatar widget with a colorfull ring around the image

Paweł Wacławiak 0 Feb 19, 2022
Simple and effective cross platform image saver for flutter, supported web and desktop

Simple and effective cross platform image saver for flutter, supported web and desktop

7c00 3 Oct 5, 2022
Loading indicator GIFs. Material and Cupertino (Android and iOS) loading indicators in assorted sizes. Use as placeholders for loading remote image assets. Demo: https://gallery.codelessly.com/flutterwebsites/loadinggifs/

Loading GIFs High quality Android and iOS loading spinners. View Demo Loading GIFs is a collection of high fidelity loading animations in GIF format.

Codelessly 31 Dec 23, 2022
Flutter plugin that allows you to display multi image picker on iOS and Android. 👌🔝🎉

IMPORTANT: This repository has been archived and no longer mantained. As I don't have time anymore to work on the package it became very outdated. For

Radoslav Vitanov 898 Apr 29, 2021
A simple and easy flutter demo to crop image

flutter_image_crop A simple demo to crop image on flutter easily. A Chinese version of this document can be found here Flutter_image_crop Plugin will

路小飞 3 Jul 8, 2021