How to Implement Smooth Pinch-to-Zoom Animation similar to Photos application (iphone) in Flutter?

I’m building a photo gallery app in Flutter where users can pinch to zoom in/out, dynamically adjusting the number of columns in a format of GridView. My goal is to create smooth animations for resizing photos and changing the number of columns (maximum 4, minimum 1), similar to the Photos app on iPhone.

I currently use AnimatedBuilder to rebuild the layout when the column count changes, combined with a GestureDetector to detect pinch gestures. Here’s a brief outline of my approach:

• Use GestureDetector to capture pinch gestures and scale values.
• Adjust the _columnCount dynamically based on the pinch scale.
• Use AnimatedBuilder to rebuild the GridView and ensure smooth animations during the transition.

While this works, I’m looking for better or alternative methods to:

• Reduce number of rebuilding the whole widget continuously any time the scale updated
• Optimize performance and smoothness of the animations.
• Efficiently manage grid resizing and photo scaling similar to Photos app
  Here’s a simplified version of my current implementation:

Widget _buildAnimatedGrid() {
  return AnimatedBuilder(
    animation: _animationController,
    builder: (context, child) {
      return LayoutBuilder(
        builder: (context, constraints) {
          const double itemSpacing = 10.0;
          return GridView.builder(
            physics: const ClampingScrollPhysics(),
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: _columnCount,
              mainAxisSpacing: itemSpacing,
              crossAxisSpacing: itemSpacing,
              childAspectRatio: (604 / 960),
            ),
            itemCount: _images.length,
            itemBuilder: (context, index) {
              return AnimatedContainer(
                duration: const Duration(milliseconds: 300),
                curve: Curves.easeOutCubic,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(6),
                  color: Colors.grey[900],
                ),
                child: ClipRRect(
                  borderRadius: BorderRadius.circular(6),
                  child: Image.network(
                    _images[index],
                    fit: BoxFit.cover,
                  ),
                ),
              );
            },
          );
        },
      );
    },
  );
}

I’m curious about:

• Are there alternative animation strategies or libraries that could enhance smoothness?
• Is there a better way to integrate pinch-to-zoom with the GridView for this use case?

Any insights, suggestions, or alternative implementations are greatly appreciated!
Millions thanks to any demo or sample working codes. Thank you