Reputation: 1736
My goal is, to have a container who can be dragged around in the vertical axis. After removing the finger the container should move a bit forward with the velocity I had after ending the touch. I want to have the exact same animation/feeling after you stop scrolling on an android phone and it continues to scroll a little bit further.
This is what it looks so far:
This is my code:
class _MyHomePageState extends State<MyHomePage>
with SingleTickerProviderStateMixin {
double _offeset = 0;
double get offset => _offeset;
set offset(double offeset) {
if(offeset < 500)
setState(() {
_offeset = offeset;
});
}
AnimationController controller;
ClampingScrollSimulation simulation;
@override
void initState() {
super.initState();
controller = AnimationController(vsync: this, upperBound: 5)
..addListener(() {
offset += controller.value;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: <Widget>[
Positioned(
top: offset,
left: 0,
right: 0,
child: GestureDetector(
onVerticalDragUpdate: (DragUpdateDetails details) {
offset += details.delta.dy;
},
onVerticalDragEnd: (DragEndDetails details) {
simulation = ClampingScrollSimulation(
position: 0, velocity: details.primaryVelocity,
);
controller.animateWith(simulation);
},
child: Container(height: 50, width: 50, color: Colors.red),
),
),
],
),
);
}
}
The problem is, that this is not the Android scroll animation and I don't know how to get it. (It feels like the animation is linear, stops too early and doesn't take advantage of the velocity parameter) I am even using the ClampingScrollSimulation
class, which is used in all Scroll widgets in Flutter to simulate Android scrolling.
Upvotes: 1
Views: 1241
Reputation: 1736
The solution was to multiply the _controller.value
with _controller.velocity
. Like this:
offset += controller.value * _controller.velocity / 100;
Upvotes: 1