Android 在flatter中设置小部件动画的正确方法是什么

我已经尝试了很多软件包，比如和一个小部件，比如

AnimatedSwitcher

，但是没有任何效果，他们只是在没有动画的情况下更改小部件。。这是我的密码：

AnimatedSwitcher(
持续时间：持续时间（毫秒：1），
孩子：我的公司
？容器(
键：ValueKey（0），
孩子：填充(
填充：LTRB（40,0,40,0）中的常量边集，
子：列(
crossAxisAlignment:crossAxisAlignment.center，
儿童：[
文本字段(
装饰：输入装饰(
enabledBorder:UnderlineInputBorder(
边界：
边框（颜色：颜色。白色），
),
前缀：Image.asset(
“资产/图像/用户图标.png”），
labelText:“إ㶋㶋㶋㶫㶫㷛”，
标签样式：文本样式(
颜色：颜色。白色，字体大小：18），
),
文本字段(
装饰：输入装饰(
enabledBorder:UnderlineInputBorder(
边界：
边框（颜色：颜色。白色），
),
前缀：Image.asset(
“assets/images/password_icon.png”），
后缀：图标按钮(
图标：Image.asset(
“assets/images/show_icon.png”），
按下：（）{}，
),
标签文字：“كلمةالموو”，
标签样式：文本样式(
颜色：颜色。白色，字体大小：18），
),
],
),
),
)
：容器(
键：ValueKey（1），
孩子：填充(
填充：从LTRB（40,40,40,40）开始的常数边集，
子：列(
crossAxisAlignment:crossAxisAlignment.center，
儿童：[
文本字段(
装饰：输入装饰(
enabledBorder:UnderlineInputBorder(
边界：
边框（颜色：颜色。白色），
),
前缀：Image.asset(
“资产/图像/用户图标.png”），
labelText:‘قمالجوال’，
标签样式：文本样式(
颜色：颜色。白色，字体大小：18），
),
文本字段(
装饰：输入装饰(
enabledBorder:UnderlineInputBorder(
边界：
边框（颜色：颜色。白色），
),
前缀：Image.asset(
“assets/images/password_icon.png”），
后缀：图标按钮(
图标：Image.asset(
“assets/images/show_icon.png”），
按下：（）{}，
),
标签文字：“كلمةالموو”，
标签样式：文本样式(
颜色：颜色。白色，字体大小：18），
),
],
),
),
)
),

这只是一个点击改变小部件，没有任何动画，我需要它像这个视频：

---

动画切换器只是在显示的小部件之间切换

关于你的问题，我有一个想法，就是使用一个堆栈，其中两个定位项作为按钮，一个定位转换，按下时在第一个和第二个定位小部件的位置之间转换

看看这个例子：

现在我有时间做一个简单的例子来说明我的想法，如下所示：

（它不会延迟-这是由视频转换为gif引起的）

可以复制粘贴作为基础的代码：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage>
    with SingleTickerProviderStateMixin {
  AnimationController _controller;

  final double containerWidth = 150.0;
  final double containerHeight = 50.0;
  final double padding = 20.0;
  final double borderWidth = 5.0;

  @override
  void initState() {
    super.initState();
    _controller =
        AnimationController(duration: Duration(seconds: 1), vsync: this);
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: LayoutBuilder(builder: (context, constraints) {
        final Size biggest = constraints.biggest;
        return Container(
          width: MediaQuery.of(context).size.width,
          height: MediaQuery.of(context).size.height,
          color: Colors.white,
          child: Stack(
            children: [
              PositionedTransition(
                rect: RelativeRectTween(
                  begin: RelativeRect.fromSize(
                      Rect.fromLTWH(
                          padding, padding, containerWidth, containerHeight),
                      biggest),
                  end: RelativeRect.fromSize(
                      Rect.fromLTWH(biggest.width - containerWidth - padding,
                          padding, containerWidth, containerHeight),
                      biggest),
                ).animate(CurvedAnimation(
                  parent: _controller,
                  curve: Curves.easeInOut,
                )),
                child: Container(
                  width: containerWidth,
                  height: containerHeight,
                  decoration:
                      BoxDecoration(border: Border.all(width: borderWidth)),
                ),
              ),
              Positioned(
                  top: padding + borderWidth,
                  left: padding + borderWidth,
                  child: GestureDetector(
                    onTap: () {
                      _controller.reverse();
                    },
                    child: Container(
                      width: containerWidth - 2 * borderWidth,
                      height: containerHeight - 2 * borderWidth,
                      child: Center(
                        child: Text(
                          "Text1",
                          style: TextStyle(color: Colors.black, fontSize: 20),
                        ),
                      ),
                    ),
                  )),
              Positioned(
                  top: padding + borderWidth,
                  left: biggest.width - containerWidth - padding + borderWidth,
                  child: GestureDetector(
                    onTap: () {
                      _controller.forward();
                    },
                    child: Container(
                      width: containerWidth - 2 * borderWidth,
                      height: containerHeight - 2 * borderWidth,
                      child: Center(
                        child: Text(
                          "Text2",
                          style: TextStyle(color: Colors.black, fontSize: 20),
                        ),
                      ),
                    ),
                  )),
            ],
          ),
        );
      }),
    );
  }
}

导入“包装：颤振/材料.省道”；
void main（）{
runApp（MyApp（））；
}
类MyApp扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
返回材料PP(
标题：“颤振演示”，
主题：主题数据(
主样本：颜色。蓝色，
视觉的