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.
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.