Flutter : Widget Switch Between Animation - flutter

Question

I trying to do animation for widget switching position. Image below show A and B widget, I would like to switch between A to B / B to A when button clicked. But at first I have no clue where to start, I wonder is there any plugin are able to achieve, any suggestion could help me, just and some tips, I willing to study the suggestion plugin.
I tried using AnimatedAlign
Container(
height: 120.0,
color: Colors.black,
child: Column(
children: [
AnimatedAlign(
alignment: _alignment.value = _alignment.value == Alignment.topCenter ? Alignment.bottomCenter : _alignment.value,
curve: Curves.ease,
duration: Duration(milliseconds: 500),
child: Padding(
padding: EdgeInsets.all(2.5),
child: Container(
height: 55,
color: Colors.red,
),
)
),
AnimatedAlign(
alignment: _alignment.value = _alignment.value == Alignment.bottomCenter ? Alignment.topCenter : _alignment.value,
curve: Curves.ease,
duration: Duration(milliseconds: 500),
child: Padding(
padding: EdgeInsets.all(2.5),
child: Container(
height: 55,
color: Colors.blue,
),
),
)
],
),
),
RaisedButton(
onPressed: () {
_alignment.value = Alignment.bottomCenter;
},
child: Text("Switch Position"),
)

Answer 1

I Created an Example ... this is working.I used Animation Positioned
import 'package:flutter/material.dart';
void main() {
runApp(MyClass());
}
class MyClass extends StatefulWidget {
#override
_MyClassState createState() => _MyClassState();
}
class _MyClassState extends State<MyClass>{
bool change = true;
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home: Scaffold(
appBar: AppBar(title: Text('Title')),
body: Stack(
children: <Widget>[
AnimatedPositioned(
top: change ? 50 : 150,
left: 50,
right: 50,
duration: Duration(milliseconds: 300),
child: red()
),
AnimatedPositioned(
top: change ? 150 : 50,
left: 50,
right: 50,
duration: Duration(milliseconds: 300),
child: blue()
),
Positioned(
top: 210,
left: 50,
right: 50,
child: Center(
child: InkWell(
onTap: (){
setState(() {
change = !change;
});
},
child: Container(
color: Colors.amber,
width: 65,
height: 50,
child: Center(child: Text("click me")),
),
),
),
)
],
),
),
);
}
}
red(){
return Container(
width: 120,
height: 50,
color: Colors.red,
);
}
blue(){
return Container(
width: 120,
height: 50,
color: Colors.blue,
);
}