content: import 'package:flutter/material.dart';
  
  
  class ExampleParallax extends StatelessWidget {
    const ExampleParallax({
      super.key,
    });
  
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        body: SingleChildScrollView(
          child: Column(
            children: [
              for (final imageUrl in imageUrls)
                ParallaxImageItem(imageUrl: imageUrl),
            ],
          ),
        ),
      );
    }
  }
  
  class ParallaxImageItem extends StatelessWidget {
     ParallaxImageItem({
      super.key,
      required this.imageUrl,
    });
  
    final String imageUrl;
    final GlobalKey _backgroundImageKey = GlobalKey();
  
    @override
    Widget build(BuildContext context) {
      return Padding(
        padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 16),
        child: AspectRatio(
          aspectRatio: 16 / 9,
          child: ClipRRect(
            borderRadius: BorderRadius.circular(16),
            child: Stack(
              children: [
                _buildParallaxBackground(context),
                _buildGradient(),
                // _buildTitle(),
              ],
            ),
          ),
        ),
      );
    }
  
    Widget _buildParallaxBackground(BuildContext context) {
      return Flow(
        delegate: ParallaxFlowDelegate(
          scrollable: Scrollable.of(context),
          listItemContext: context,
          backgroundImageKey: _backgroundImageKey,
        ),
        children: [
          Image.network(
            imageUrl,
            key: _backgroundImageKey,
            fit: BoxFit.cover,
          ),
        ],
      );
    }
  
    Widget _buildGradient() {
      return Positioned.fill(
        child: DecoratedBox(
          decoration: BoxDecoration(
            gradient: LinearGradient(
              colors: [Colors.transparent, Colors.black.withOpacity(0.7)],
              begin: Alignment.topCenter,
              end: Alignment.bottomCenter,
              stops: const [0.6, 0.95],
            ),
          ),
        ),
      );
    }
  
    Widget _buildTitle() {
      return Positioned(
        left: 20,
        bottom: 20,
        child: Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: const [
            Text(
              'Parallax Image', // Placeholder title, you can change as needed
              style: TextStyle(
                color: Colors.white,
                fontSize: 20,
                fontWeight: FontWeight.bold,
              ),
            ),
          ],
        ),
      );
    }
  }
  
  class ParallaxFlowDelegate extends FlowDelegate {
    ParallaxFlowDelegate({
      required this.scrollable,
      required this.listItemContext,
      required this.backgroundImageKey,
    }) : super(repaint: scrollable.position);
  
    final ScrollableState scrollable;
    final BuildContext listItemContext;
    final GlobalKey backgroundImageKey;
  
    @override
    BoxConstraints getConstraintsForChild(int i, BoxConstraints constraints) {
      return BoxConstraints.tightFor(
        width: constraints.maxWidth,
      );
    }
  
    @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);
  
      // Calculate the vertical alignment of the background
      // based on the scroll percent.
      final verticalAlignment = Alignment(0.0, scrollFraction * 2 - 1);
  
      // Convert the background alignment into a pixel offset for
      // painting purposes.
      final backgroundSize =
          (backgroundImageKey.currentContext!.findRenderObject() as RenderBox)
              .size;
      final listItemSize = context.size;
      final childRect =
      verticalAlignment.inscribe(backgroundSize, Offset.zero & listItemSize);
  
      // Paint the background.
      context.paintChild(
        0,
        transform:
        Transform.translate(offset: Offset(0.0, childRect.top)).transform,
      );
    }
  
    @override
    bool shouldRepaint(ParallaxFlowDelegate oldDelegate) {
      return scrollable != oldDelegate.scrollable ||
          listItemContext != oldDelegate.listItemContext ||
          backgroundImageKey != oldDelegate.backgroundImageKey;
    }
  }
  
  const imageUrls = [
    'https://plus.unsplash.com/premium_photo-1663957881842-ac05e2441a08?q=80&w=1738&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
    'https://plus.unsplash.com/premium_photo-1668883189152-d771c402c385?q=80&w=1548&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
    'https://images.unsplash.com/photo-1597466599360-3b9775841aec?q=80&w=1664&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
    'https://images.unsplash.com/photo-1580934738430-70b79c94205f?q=80&w=1548&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
    'https://images.unsplash.com/photo-1559305289-4c31700ba9cb?q=80&w=1546&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
    'https://plus.unsplash.com/premium_photo-1682048358672-1c5c6c9ed2ae?q=80&w=1632&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
    'https://plus.unsplash.com/premium_photo-1697730150275-dba1cfe8af9c?q=80&w=1470&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D'
  ];
  