Flutter Move container to 3 positions - flutter

Question

Good afternoon! I am new to Flutter. Faced such a problem
There is a scooter card. I need it to be able to move vertically across the screen between three positions - initial, top and bottom (as planned, in the bottom position, part of the card goes off the screen). I tried to solve it through AnimatedPositioned and child GestureDetector. But I managed to do it well for only two positions. When I tried to do this for three positions, the movements did not work out quite correctly. Because of what it is difficult to install the card in its original position. How can this be done for three positions? Maybe not through AnimatedPositioned? Thanks a lot!
starting positionbottom positiontop position
this is how i did for 2 positions
class CardBeforeRent extends StatefulWidget {
const CardBeforeRent({super.key});
#override
State<CardBeforeRent> createState() => _CardBeforeRentState();
}
class _CardBeforeRentState extends State<CardBeforeRent> {
bool isHiden = false;
num hidenV = 0;
hide(details) {
if (details.delta.dy < 0) {
setState(() {
hidenV = 0;
isHiden = false;
});
} else if (details.delta.dy > 0) {
setState(() {
hidenV = -265;
isHiden = true;
});
}
}
#override
Widget build(BuildContext context) {
return AnimatedPositioned(
width: MediaQuery.of(context).size.width,
duration: const Duration(milliseconds: 600),
bottom: isHiden ? hidenV.toDouble() : 0,
child: GestureDetector(
onVerticalDragUpdate: (details) => hide(details),
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
SizedBox(
height: 360,
child: StatefulBuilder(
builder: (context, setState) => FractionallySizedBox(
heightFactor: 1.1,
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 10),
decoration: BoxDecoration(
color: Theme.of(context).dialogBackgroundColor,
borderRadius: const BorderRadius.only(
topLeft: Radius.circular(15),
topRight: Radius.circular(15),
),
),
child: Column(
children[...],
),
),
),
),
),
Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Container(
decoration:
BoxDecoration(color: Theme.of(context).bottomAppBarColor),
height: 100,
child: BookButton(...),
],
),
],
),
),
);
}
}
this is what i tried to do for 3 positions
class _CardBeforeRentState extends State<CardBeforeRent> {
double cardPadding = 0;
#override
Widget build(BuildContext context) {
return AnimatedPositioned(
width: MediaQuery.of(context).size.width,
duration: const Duration(milliseconds: 600),
bottom: cardPadding,
child: GestureDetector(
onVerticalDragUpdate: (details) {
if (details.delta.dy == 0) {
setState(() {
cardPadding = 0;
});
} else if (details.delta.dy < 0) {
setState(() {
cardPadding = -265;
});
} else if (details.delta.dy > 0) {
setState(() {
cardPadding = 140;
});
}
},
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
SizedBox(
height: 360,
child: StatefulBuilder(
builder: (context, setState) => FractionallySizedBox(
heightFactor: 1.1,
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 10),
decoration: BoxDecoration(
color: Theme.of(context).dialogBackgroundColor,
borderRadius: const BorderRadius.only(
topLeft: Radius.circular(15),
topRight: Radius.circular(15),
),
),
child: Column(
children[...],
),
),
),
),
),
Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Container(
decoration:
BoxDecoration(color: Theme.of(context).bottomAppBarColor),
height: 100,
child: BookButton(...),
],
),
],
),
),
);
}
}