Creating a Scrolling Parallax Effect

Scrolling parallax effects add depth and visual interest to a list of items by making images appear to move at a different speed than the rest of the content as the user scrolls. Let's break down how to implement this effect in Flutter:

1. Create a list to hold the parallax items:

   Begin by creating a new stateless widget, let's call it ParallaxRecipe. Inside this widget, set up  SingleChildScrollView with a Column. This structure forms the foundation of your list.

   class ParallaxRecipe extends StatelessWidget {
     const ParallaxRecipe({super.key});
   
     @override
     Widget build(BuildContext context) {
       return const SingleChildScrollView(
         child: Column(
           children: [],
         ),
       );
     }
   }

   Each item in the list will be represented by a card containing an image and some text. These items will be stacked vertically within the SingleChildScrollView.

   
   

2. Display items with text and a static image:

   Define a new stateless widget called LocationListItem. This widget will represent each item in the list.

   @immutable
   class LocationListItem extends StatelessWidget {
     const LocationListItem({
       super.key,
       required this.imageUrl,
       required this.name,
       required this.country,
     });
   
     final String imageUrl;
     final String name;
     final String country;
   
     @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(),
                 _buildTitleAndSubtitle(),
               ],
             ),
           ),
         ),
       );
     }
   
     Widget _buildParallaxBackground(BuildContext context) {
       return Positioned.fill(
         child: Image.network(
           imageUrl,
           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 _buildTitleAndSubtitle() {
       return Positioned(
         left: 20,
         bottom: 20,
         child: Column(
           mainAxisSize: MainAxisSize.min,
           crossAxisAlignment: CrossAxisAlignment.start,
           children: [
             Text(
               name,
               style: const TextStyle(
                 color: Colors.white,
                 fontSize: 20,
                 fontWeight: FontWeight.bold,
               ),
             ),
             Text(
               country,
               style: const TextStyle(
                 color: Colors.white,
                 fontSize: 14,
               ),
             ),
           ],
         ),
       );
     }
   }

   • Each LocationListItem will display a rounded-rectangle background image, representing a location, overlaid with the name and country of that location.

   • Initially, use a static Image widget for the background. Later, this will be replaced with a dynamic parallax version.

     class ParallaxRecipe extends StatelessWidget {
       const ParallaxRecipe({super.key});
     
       @override
       Widget build(BuildContext context) {
         return SingleChildScrollView(
           child: Column(
             children: [
               for (final location in locations)
                 LocationListItem(
                   imageUrl: location.imageUrl,
                   name: location.name,
                   country: location.place,
                 ),
             ],
           ),
         );
       }
     }

   
   

3. Implement the parallax effect:

A parallax scrolling effect adds depth and visual interest to a list by moving background images at a different speed than the rest of the content as the user scrolls. Here's how to implement it in Flutter:

1. Understanding Parallax Effect:

   • Parallax effect involves moving background images opposite to the scroll direction. As list items move up, background images move down, creating a visually appealing effect.

   • Achieving this effect requires knowing the position of list items within the Scrollable widget. However, this information isn't available until after the layout phase. Flutter's Flow widget allows us to control widget transformations before painting, solving this problem.

2. Wrap Background Image with Flow:

   • Wrap the background Image widget with a Flow widget. This provides control over the transformation of the background image before painting.

     Widget _buildParallaxBackground(BuildContext context) {
       return Flow(
         children: [
           Image.network(
             imageUrl,
             fit: BoxFit.cover,
           ),
         ],
       );
     }

   
   

3. Introduce ParallaxFlowDelegate:

   Create a new class called ParallaxFlowDelegate, which extends FlowDelegate. This delegate will handle the layout and painting of the background image.

   class ParallaxFlowDelegate extends FlowDelegate {
     ParallaxFlowDelegate();
   
     @override
     BoxConstraints getConstraintsForChild(int i, BoxConstraints constraints) {
       // To be implemented.
     }
     @override
     void paintChildren(FlowPaintingContext context) {
       // To be implemented.
     }
     @override
     bool shouldRepaint(covariant FlowDelegate oldDelegate) {
       // To be implemented.
       return true;
     }
   }

   
   

4. Control Child Sizing:

   In the ParallaxFlowDelegate, specify tight width constraints for the background image child. This ensures the image is sized exactly as wide as the Flow widget.

   @override
   BoxConstraints getConstraintsForChild(int i, BoxConstraints constraints) {
     return BoxConstraints.tightFor(
       width: constraints.maxWidth,
     );
   }

   
   

   
   

To create a parallax scrolling effect, you need to calculate the vertical position of each background image based on its scroll position and paint it accordingly. Here's how to achieve this in Flutter:

1. Get Necessary Information:

   You need three critical pieces of information: the bounds of the ancestor Scrollable, the bounds of the individual list item, and the size of the background image after scaling.

   
   

2. Wrap Background Image with Flow:

   Wrap the background Image widget with a Flow widget to control its transformation before painting.

   Widget _buildParallaxBackground(BuildContext context) {
     return Flow(
       delegate: ParallaxFlowDelegate(),
       children: [
         Image.network(
           imageUrl,
           fit: BoxFit.cover,
         ),
       ],
     );
   }

   
   

3. Introduce ParallaxFlowDelegate:

   Create a ParallaxFlowDelegate class that extends FlowDelegate to handle layout and painting of the background image.

   class ParallaxFlowDelegate extends FlowDelegate {
     ParallaxFlowDelegate({
       required this.scrollable,
       required this.listItemContext,
       required this.backgroundImageKey,
     });
   
     final ScrollableState scrollable;
     final BuildContext listItemContext;
     final GlobalKey backgroundImageKey;
   }

   
   

4. Implement shouldRepaint Method:

   Implement the shouldRepaint method to repaint the delegate when necessary information changes.

   @override
   bool shouldRepaint(ParallaxFlowDelegate oldDelegate) {
     return scrollable != oldDelegate.scrollable ||
         listItemContext != oldDelegate.listItemContext ||
         backgroundImageKey != oldDelegate.backgroundImageKey;
   }

   
   

5. Calculate Layout:

   Calculate the pixel position of the list item within its ancestor Scrollable and the percentage position within the scrollable area.

   @override
   void paintChildren(FlowPaintingContext context) {
     final scrollableBox = scrollable.context.findRenderObject() as RenderBox;
     final listItemBox = listItemContext.findRenderObject() as RenderBox;
     final listItemOffset = listItemBox.localToGlobal(
         listItemBox.size.centerLeft(Offset.zero),
         ancestor: scrollableBox);
   
     final viewportDimension = scrollable.position.viewportDimension;
     final scrollFraction =
         (listItemOffset.dy / viewportDimension).clamp(0.0, 1.0);
   }

   
   

6. Calculate Alignment:

   Use the scroll percentage to calculate the vertical alignment of the background image.

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

   
   

7. Calculate Child Rectangle:

   Use the vertical alignment, list item size, and background image size to produce a rectangle for positioning the background image.

   final backgroundSize =
         (backgroundImageKey.currentContext!.findRenderObject() as RenderBox)
             .size;
   final listItemSize = context.size;
   final childRect =
         verticalAlignment.inscribe(backgroundSize, Offset.zero & listItemSize);

   
   

8. Paint Background Image:

   Paint the background image with the desired translation transformation to achieve the parallax effect.

   context.paintChild(
     0,
     transform:
         Transform.translate(offset: Offset(0.0, childRect.top)).transform,
   );

   
   

9. Ensure Repainting:

   Pass the ScrollableState's ScrollPosition to the FlowDelegate superclass to ensure repainting when the scroll position changes.

   ParallaxFlowDelegate({
       required this.scrollable,
       required this.listItemContext,
       required this.backgroundImageKey,
     }) : super(repaint: scrollable.position);

   
   

   You've successfully implemented parallax scrolling background images for your list of cards.