Flutter：动画之间的小部件切换

Question

我尝试为小部件切换位置制作动画。下图显示了 A 和 B 小部件，我想在单击按钮时在 A 到 B / B 到 A 之间切换。但是一开始我不知道从哪里开始，不知道有没有什么插件可以实现，任何建议都可以帮助我，只是和一些技巧，我愿意研究建议插件。

我尝试使用 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

我创建了一个示例...这是有效的。我使用了动画定位

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,
  );
}