Flutter reverse animation doesn't work after animation complete - flutter

Question

this is below code is my sample code to implementing simple sliding widget to bottom, animation of translate to bottom work fine, but when i tap to again to close, that doesn't work
and i have another problem as, translating with size of container in this part of code:
Tween<Offset>(begin: Offset.zero, end: Offset(0.0, 0.50))
for example:
Tween<Offset>(begin: Offset.zero, end: Offset(0.0, HEIGHT OF WIDGET ))
full source code:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Stack(
children: <Widget>[
TopSlidingLayer(
context,
height: 200.0,
backgroundColor: Colors.indigo,
child: Container(color: Colors.green),
)
],
),
),
);
}
}
class TopSlidingLayer extends StatefulWidget {
final BuildContext context;
final double height;
final Color backgroundColor;
final int animationSpeed;
final Widget child;
TopSlidingLayer(this.context, {this.height = 100.0, this.backgroundColor, this.animationSpeed = 300, #required this.child});
#override
State<TopSlidingLayer> createState() => _TopSlingLayerState();
}
class _TopSlingLayerState extends State<TopSlidingLayer> with TickerProviderStateMixin {
AnimationController _controller;
Animation<Offset> _offset;
#override
void initState() {
super.initState();
_controller = AnimationController(vsync: this, duration: Duration(milliseconds: widget.animationSpeed));
_offset = Tween<Offset>(begin: Offset.zero, end: Offset(0.0, 0.50)).animate(_controller);
}
#override
Widget build(BuildContext context) {
return SlideTransition(
position: _offset,
child: Container(
height: widget.height,
decoration: BoxDecoration(
color: Colors.indigo,
),
child: Column(
children: <Widget>[
Expanded(child: widget.child),
InkWell(
onTap: () {
print('tapped');
switch (_controller.status) {
case AnimationStatus.completed:
_controller.reverse();
break;
case AnimationStatus.dismissed:
_controller.forward();
break;
default:
}
},
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
'click me',
style: TextStyle(color: Colors.white),
),
),
),
],
),
),
);
}
}

Answer 1

The issue is coming from the height in the child container in your SlideTransition widget.
button out the container
When you tap the button, it will move out of the container so you will not be able to click on it again.
So I removed the height to have a full screen container and instead, I put a sizebox around the inkwell to give the same result as you have.
class _TopSlingLayerState extends State<TopSlidingLayer>
with TickerProviderStateMixin {
AnimationController _controller;
Animation<Offset> _offset;
#override
void initState() {
super.initState();
_controller = AnimationController(
vsync: this, duration: Duration(milliseconds: widget.animationSpeed));
_offset = Tween<Offset>(begin: Offset.zero, end: Offset(0.0, 0.20))
.animate(_controller);
}
#override
Widget build(BuildContext context) {
return SlideTransition(
position: _offset,
child: Container(
child: Column(
children: <Widget>[
Container(child: widget.child, height: widget.height),
InkWell(
onTap: () {
print('tapped ${_controller.status}');
switch (_controller.status) {
case AnimationStatus.completed:
_controller.reverse();
break;
case AnimationStatus.dismissed:
_controller.forward();
break;
default:
}
},
child: SizedBox(
width: double.infinity,
child: Container(
decoration: BoxDecoration(
color: Colors.indigo,
),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
'click me',
style: TextStyle(color: Colors.white),
textAlign: TextAlign.center,
),
),
),
),
),
],
),
),
);
}
}
I don't know if it answers well your issue.