Flutter animation - animation

Question

How can I fade out 1st widget, and animate 2nd widget to come from bottom, and replace the 1st widget, once user click the button?
And on click on second button, to make 2nd widget go down and 1st widget fade in?

Answer 1

You can do that with an AnimatedOpacity for the first widget and an AnimatedPositioned for the second one. Here you have an example:
import 'package:flutter/material.dart';
class HomePage extends StatefulWidget {
#override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
double _firstWidgetOpacity = 1.0;
double _secondWidgetBottomPosition = -200.0;
animate() {
setState(() {
if (_firstWidgetOpacity == 1.0) {
_firstWidgetOpacity = 0.0;
_secondWidgetBottomPosition = MediaQuery.of(context).size.height / 2 - 140.0;
} else {
_firstWidgetOpacity = 1.0;
_secondWidgetBottomPosition = -200.0;
}
});
}
#override
void initState() {
super.initState();
print((560 / 60).floor());
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Home'),
),
floatingActionButton: FloatingActionButton.extended(
onPressed: animate,
label: Text('Animate'),
),
body: Stack(
children: <Widget>[
Align(
alignment: Alignment.center,
child: AnimatedOpacity(
duration: Duration(milliseconds: 350),
opacity: _firstWidgetOpacity,
curve: Curves.easeIn,
child: Container(
width: 200.0,
height: 200.0,
color: Colors.blue,
child: Center(
child: Text('First widget'),
),
),
),
),
AnimatedPositioned(
duration: Duration(milliseconds: 350),
curve: Curves.elasticIn,
bottom: _secondWidgetBottomPosition,
left: 0.0,
right: 0.0,
child: Center(
child: Container(
width: 200.0,
height: 200.0,
color: Colors.orange,
child: Center(
child: Text('Second widget'),
),
),
),
),
],
),
);
}
}
You can play with the durations and curves to get the result that you need.