title: Flutter how to create parallax effect for background image
body: <p>I am trying to create a parallax effect for the background image of a container.
  I followed this tutorial <a href="https://docs.flutter.dev/cookbook/effects/parallax-scrolling" rel="nofollow noreferrer">https://docs.flutter.dev/cookbook/effects/parallax-scrolling</a>.</p>
  <p>However I would like for the background image to remain still in the viewport ad the user scrolls.
  Basically I would like to achieve this behavior <a href="https://www.w3schools.com/howto/tryhow_css_parallax_demo.htm" rel="nofollow noreferrer">https://www.w3schools.com/howto/tryhow_css_parallax_demo.htm</a>.</p>
  <p>I believe that in order to achieve this I have to modify the paintChildren method inside ParallaxFlowDelegate</p>
  <pre class="lang-dart prettyprint-override"><code>@override
    void paintChildren(FlowPaintingContext context) {
      // Calculate the position of this list item within the viewport.
      final scrollableBox = scrollable.context.findRenderObject() as RenderBox;
      final listItemBox = listItemContext.findRenderObject() as RenderBox;
      final listItemOffset = listItemBox.localToGlobal(
          listItemBox.size.centerLeft(Offset.zero),
          ancestor: scrollableBox);
  
      // Determine the percent position of this list item within the
      // scrollable area.
      final viewportDimension = scrollable.position.viewportDimension;
      final scrollFraction =
      (listItemOffset.dy / viewportDimension).clamp(0.0, 1.0);
  
      // Convert the background alignment into a pixel offset for
      // painting purposes.
      final backgroundSize =
          (backgroundImageKey.currentContext!.findRenderObject() as RenderBox)
              .size;
  
      // Calculate the vertical alignment of the background
      // based on the scroll percent.
      final verticalAlignment = Alignment(0.0, scrollFraction * 2 - 1);
  
      final listItemSize = context.size;
      final childRect =
      verticalAlignment.inscribe(backgroundSize, Offset.zero &amp; listItemSize);
      // Paint the background.
      context.paintChild(
        0,
        transform:
        Transform.translate(offset: Offset(0.0, childRect.top)).transform,
      );
    }
  </code></pre>
  <p>but I can't figure out how.</p>
  <p>Any help would be greatly appreciated :)</p>