Flutter - Swipe down to start Navigator.pop animation - ios

Question

I want to know how to swipe down on a page to start the pop animation, but I want the animation to play as we're swiping down. For exemple, the "swipe from left to right" on iOS to pop a page is amazing, because the page that will pop follows the finger swiping LTR. And I want to do the same but vertically, and we would be able to close it from anywhere in the scaffold (not necessarily from the top edge). My animation has an hero animation so it might be harder.
Here's how it looks now :
And I want to have this animation playing, but swiping down, not swiping from the left. (Like exactly this animation, or one where the page goes down).
Here is the page I want to swipe to close :
class TreeDescription extends StatelessWidget {
Tree tree;
bool goBackArrow;
TreeDescription(this.tree, {this.goBackArrow = true});
#override
Widget build(BuildContext context) {
return Scaffold(
body: GestureDetector(
onVerticalDragStart: (details) => print("Do something"),
child: Column(
children: <Widget>[
Stack(
children: [
Hero(
transitionOnUserGestures: true,
tag: tree.imagePath,
child: Container(
height: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Colors.black, Colors.transparent],
begin: Alignment.bottomCenter,
end: Alignment.topCenter,
stops: [0, 0.2]
),
borderRadius: BorderRadius.only(bottomLeft: Radius.circular(20), bottomRight: Radius.circular(20)),
image: DecorationImage(image: AssetImage(tree.imagePath), fit: BoxFit.cover),
),
child: Align(
alignment: Alignment.bottomCenter,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.end,
children: [
Text(
tree.name,
style: Theme.of(context)
.textTheme
.headline4
.copyWith(fontWeight: FontWeight.w600, color: Colors.white),
),
Text(
tree.species,
style: Theme.of(context)
.textTheme
.headline6
.copyWith(fontWeight: FontWeight.w600, color: Colors.white),
),
],
),
),
),
),
goBackArrow ? Positioned(
top: 30,
child: IconButton(
icon: Icon(Icons.chevron_left, color: Colors.white, size: 40,),
onPressed: () => Navigator.pop(context),
tooltip: 'Retour',
),
) : SizedBox.shrink()
],
),
Expanded(
child: SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("Description :", style: Theme.of(context).textTheme.headline6.copyWith(color: Theme.of(context).primaryColor),),
Text(tree.description, textAlign: TextAlign.justify,),
SizedBox(height: 20,),
Text("La feuille du ${tree.name.toLowerCase()} :", style: Theme.of(context).textTheme.headline6.copyWith(color: Theme.of(context).primaryColor),),
SizedBox(height: 5,),
Row(
children: [
Container(
width: MediaQuery.of(context).size.width/2-40,
child: ClipRRect(
borderRadius: BorderRadius.circular(20),
child: Image.asset(tree.leafImagePath)
),
),
SizedBox(width: 5,),
Expanded(
child: Text(tree.leafDescription, textAlign: TextAlign.justify,)
),
],
),
],
),
),
),
)
],
),
),
);
}
}