GridView Animation Builder

You can combine GridView with Animation Builder to create scroll-driven animations. For example, you might want to show/hide a floating action button, fade in headers, or create parallax effects based on the grid's scroll position.

How It Works

1. Create and bind a Scroll Controller to the GridView. See the Variables documentation for how to create Scroll Controller variables.

2. Bind the same controller to an Animation Builder widget.

3. Access the scroll value in the Animation Builder

   • Inside the Animation Builder's child, use the animationValue variable to access the current scroll offset.

   • Use this value to drive animations (e.g., changing opacity, scaling, translating widgets).

Example Use Case

A common pattern is to show/hide a floating action button or display dynamic headers as users scroll through the grid.

Step-by-Step Implementation

1. Create a Scroll Controller Variable

   • Go to Variables in your project

   • Add a new Scroll Controller variable named gridScrollController

2. Set up your GridView

   • Add a GridView widget to your page

   • In the Controller property, bind it: ${gridScrollController}

   • Configure your data source, cross axis count, and item template as usual

3. Add an Animation Builder

   • Place an Animation Builder widget where you want the scroll-driven animation (e.g., for a floating button or dynamic header)

   • In the Controller property of the Animation Builder, bind the same controller: ${gridScrollController}

4. Create the Animation

   • Inside the Animation Builder's child, use ${animationValue} to access the scroll offset

   • Example: To show a "scroll to top" button after scrolling 300 pixels, set visibility to ${gt(animationValue, 300)}

Common Patterns

Floating Action Button on Scroll

Show a floating action button only after scrolling past a certain point.

Animation Builder:
  Controller: ${gridScrollController}
  
  Child:
    Floating Action Button:
      Visible: ${gt(animationValue, 300)}
      Icon: arrow_upward
      On Click:
        Control Object:
          Object: ${gridScrollController}
          Method: animateTo
          Arguments:
            offset: 0
            durationInMs: 500
            curve: 'easeOut'

Dynamic Header Opacity

Fade out a header as the user scrolls down.

Animation Builder:
  Controller: ${gridScrollController}
  
  Child:
    Container (Header):
      Opacity: ${max(0, diff(1, divide(animationValue, 200)))}
      Height: ${max(50, diff(150, mul(animationValue, 0.5)))}

Progress Indicator

Show how far the user has scrolled through the grid.

Animation Builder:
  Controller: ${gridScrollController}
  
  Child:
    Linear Progress Bar:
      Value: ${min(100, mul(divide(animationValue, totalScrollHeight), 100))}

Category Sticky Header

Change header background as user scrolls past certain points.

Animation Builder:
  Controller: ${gridScrollController}
  
  Child:
    Container (Sticky Header):
      Background Color: ${if(gt(animationValue, 200), 'solid', 'transparent')}
      Elevation: ${if(gt(animationValue, 200), 4, 0)}

Advanced: Grid Item Animations

While you can't animate individual grid items directly through their scroll position, you can create staggered entrance animations or use the Animation Builder to control overlay elements.

Overlay Animation

Create an overlay that responds to grid scrolling.

Stack:
  GridView:
    Controller: ${gridScrollController}
    Data Source: ${products}
  
  Animation Builder:
    Controller: ${gridScrollController}
    
    Child:
      Positioned (Top overlay):
        Background: ${if(gt(animationValue, 100), 'gradient', 'transparent')}

Best Practices

• Keep animations smooth: Use animateTo() instead of jumpTo() when programmatically scrolling

• Set reasonable bounds: Use max() and min() to prevent values from going too high or low

• Test on devices: Scroll-driven animations can behave differently on various screen sizes

• Consider performance: Complex animations on every scroll event can impact performance, especially with large grids

• Debounce heavy operations: If triggering actions based on scroll, consider debouncing to reduce frequency

Performance Tips

• Optimize Animation Builder children: Keep the animated widget tree lightweight

• Use opacity over visibility: Changing opacity is generally more performant than toggling visibility

• Limit animation complexity: Simple fade/scale animations perform better than complex transformations

• Cache static content: Don't rebuild static parts of animations on every scroll event

Related Documentation

• Animation Builder - Complete Animation Builder widget reference

• Variables - Learn about Scroll Controller and other variable types

• Scroll Controller - Detailed Scroll Controller documentation

• GridView - Complete GridView widget reference

• Math Operators - Functions like max(), min() for animation bounds