How to animate a Container/Button vertically up and down? - flutter

Question

I'm trying to animate the center button vertically up and down like a lift after a button click but can't figure out how to go about it. I am using sequenceAnimations elsewhere on this button so I tried wrapping it in a Positioned widget and change the bottom offset partnered with a Tween to cycle between values, unfortuntley this results in LayoutErrors and crashes...
Tried Position wrapping.
class LiftPage extends StatefulWidget {
#override
State<StatefulWidget> createState() {
return _LiftPageState();
}
}
class _LiftPageState extends State<LiftPage> with TickerProviderStateMixin {
AnimationController _pageLoadController;
AnimationController _liftImageController;
SequenceAnimation _liftPageLoadAnimation;
SequenceAnimation _liftImageAnimation;
double _screenWidth = 2000.0;
double _screenHeight = 5000.0;
#override
void initState() {
super.initState();
initPlayer();
_pageLoadController = AnimationController(vsync: this);
_liftImageController = AnimationController(vsync: this);
_liftImageAnimation = SequenceAnimationBuilder()
.addAnimatable(
animatable: Tween<double>(
begin: 0,
end: _screenHeight,
),
from: Duration(seconds: 0),
to: Duration(seconds: _timeForLiftUp),
tag: "liftGoingUp",
)
.animate(_liftImageController);
_liftPageLoadAnimation = SequenceAnimationBuilder()
.addAnimatable(
animatable: ColorTween(
begin: Color(0xfff665c6),
end: Color(0xffF599E9),
),
from: Duration(seconds: 0),
to: Duration(seconds: 4),
tag: "color",
)
.addAnimatable(
animatable: Tween<double>(
begin: 125,
end: 0,
),
from: Duration(seconds: 0),
to: Duration(seconds: 2),
tag: "border",
)
.addAnimatable(
animatable: Tween<double>(
begin: 100,
end: _screenHeight,
),
from: Duration(seconds: 0),
to: Duration(seconds: 4),
tag: "height",
)
.addAnimatable(
animatable: Tween<double>(
begin: 100,
end: _screenWidth,
),
from: Duration(seconds: 0),
to: Duration(seconds: 4),
tag: "width",
)
.addAnimatable(
animatable: ColorTween(
begin: Colors.white,
end: Color(0xffF599E9),
),
from: Duration(seconds: 0),
to: Duration(seconds: 1),
tag: "iconFade",
)
.addAnimatable(
animatable: ColorTween(
begin: Color(0x00000000),
end: Color(0xfff665c6),
),
from: Duration(milliseconds: 2000),
to: Duration(milliseconds: 2300),
tag: "circleFadeIn",
)
.addAnimatable(
animatable: ColorTween(
begin: Color(0x00ffffff),
end: Color(0xfff665c6),
),
from: Duration(milliseconds: 2500),
to: Duration(milliseconds: 3500),
tag: "audioControlsFadeIn",
)
.animate(_pageLoadController);
}
#override
Widget build(BuildContext context) {
List<Widget> childrenStack = <Widget>[
Scaffold(
body: AnimatedBuilder(
animation: _pageLoadController,
builder: (BuildContext context, Widget child) {
return Stack(
children: <Widget>[
Center(child: _placeButton()),
Center(
child: _placeCircle(),
),
Align(
alignment: Alignment.topCenter,
child: _playBackControls(),
),
],
);
}),
),
];
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Center(
child: Text('Lift Page'),
),
backgroundColor: Color(0xfff665c6),
),
body: Center(child: Stack(children: childrenStack)),
));
}
GestureDetector _placeCircle() {
return GestureDetector(
onTap: () {
final _status = _pageLoadController.status;
if (_status == AnimationStatus.completed) {
_pageLoadController.reverse();
_liftPage_liftButtonTapped();
} else {
_pageLoadController.forward();
_liftPage_liftButtonTapped();
}
},
child: Container(
height: 100,
width: 100,
decoration: BoxDecoration(
color: _liftPageLoadAnimation["circleFadeIn"].value,
borderRadius: BorderRadius.circular(125.0),
),
),
);
}
I'm trying to animate the pink circle/button up and down.
https://imgur.com/a/Iu7i5uw

Answer 1

You can use AnimatedContainer, here is an example:
class UpDown extends StatefulWidget {
#override
UpDownState createState() {
return UpDownState();
}
}
class UpDownState extends State<UpDown> {
bool up = false;
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: AnimatedContainer(
padding: EdgeInsets.all(10.0),
duration: Duration(milliseconds: 250), // Animation speed
transform: Transform.translate(
offset: Offset(0, up ? -100 : 0), // Change -100 for the y offset
).transform,
child: Container(
height: 50.0,
child: FloatingActionButton(
backgroundColor: Colors.red,
child: Icon(Icons.ac_unit),
onPressed: () {
setState(() {
up = !up;
});
},
),
),
),
),
);
}
}