[Flutter] Does Flutter not have the capability of dismissing a page and reversing the Hero...

I have a GridView of images each wrapped with a Hero and unique tag. When a user taps an image, it navigates to a PageView showing the selected image with the Hero animation page transition. However, I want to mimic the popular animation that allows the user to drag their finger vertically down the screen to initiate the reverse animation of the Hero widget. The challenge I'm facing is that the Hero widget seems limited in handling custom animations depending on gestures.

class GridPage extends StatelessWidget {
const GridPage({super.key});

@override
Widget build(BuildContext context) {
return GridView.builder(
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
mainAxisSpacing: 10,
crossAxisSpacing: 10,
),
itemCount: 99,
itemBuilder: (context, index) {
return Hero(
tag: index,
child: Container(
color: Colors.grey,
child: Center(
child: Text("Item $index"),
),
),
);
},
);
}
}

class CarouselPage extends StatefulWidget {
const CarouselPage(
{super.key, required this.children, required this.initialIndex});
final List<Widget> children;
final int initialIndex;

@override
State<CarouselPage> createState() => _CarouselPageState();
}

class _CarouselPageState extends State<CarouselPage> {
late int _currentIndex;
late final _pageController = PageController(initialPage: widget.initialIndex);

@override
void initState() {
_currentIndex = widget.initialIndex;
super.initState();
}

@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
extendBody: true,
extendBodyBehindAppBar: true,
appBar: AppBar(
backgroundColor: Colors.transparent,
foregroundColor: Colors.black,
),
body: GestureDetector(
onVerticalDragDown: (details) {
context.pop();
},
child: PageView.builder(
controller: _pageController,
itemCount: widget.children.length,
onPageChanged: (page) {
setState(() => _currentIndex = page);
},
itemBuilder: (context, index) {
return Hero(
tag: index,
child: Container(
height: MediaQuery.of(context).size.height * 0.8,
color: Colors.grey,
child: Center(
child: Text("Item $index"),
),
),
);
},
),
),
);
}
}

Continue reading...