flutter parallax scrolling in web

41 Views Asked by At

I want to use a parallax widget in web flutter, I have found this page which used parallax in html and css, I have created this part in my code and works good but it is not same which I want it. enter image description here this is my code which I use it:

import 'package:flutter/material.dart';

class ParallexFlowDelegate extends FlowDelegate {
      ParallexFlowDelegate(
  {required this.scrollable,
  required this.itemContext,
  required this.keyImage})
  : super(repaint: scrollable.position);
  final ScrollableState scrollable;
  final BuildContext itemContext;
  final GlobalKey keyImage;

  @override
  BoxConstraints getConstraintsForChild(int i, BoxConstraints constraints) =>
  BoxConstraints.tightFor(width: constraints.maxWidth);

  @override
  void paintChildren(FlowPaintingContext context) {
  final RenderBox scrollableBox =
    scrollable.context.findRenderObject() as RenderBox;
   final RenderBox itemBox = itemContext.findRenderObject() as RenderBox;
  final Offset itemOffset = itemBox.localToGlobal(
  itemBox.size.centerLeft(Offset.zero),
  ancestor: scrollableBox,
  );




final double viewportDimension = scrollable.position.viewportDimension;
final num scrollFraction = (itemOffset.dy / viewportDimension).clamp(0, 1);

final Alignment verticalAlignment = Alignment(0, scrollFraction * 2 - 1);


final Size backgroundSize =
    (keyImage.currentContext!.findRenderObject() as RenderBox).size;
final Size listItemSize = context.size;

final Rect childRect = verticalAlignment.inscribe(
  backgroundSize,
  Offset.zero & listItemSize, //context.size,
);
context.paintChild(0,
    transform: Transform.translate(
      offset: Offset(0, childRect.top),
    ).transform);
 }

 @override
 bool shouldRepaint(ParallexFlowDelegate oldDelegate) =>
  scrollable != oldDelegate.scrollable ||
  itemContext != oldDelegate.itemContext ||
  keyImage != oldDelegate.keyImage;
  }

I need the good source code for parallax scrolling in flutter.

0

There are 0 best solutions below