使用Animated非常简单，有部分组件可以在前面添加Animated如:Container,Icon等等

class MyApp1 extends StatefulWidget {
  const MyApp1({Key? key}) : super(key: key);

  @override
  State<MyApp1> createState() => _MyApp1State();
}

class _MyApp1State extends State<MyApp1> {
  @override
  Widget build(BuildContext context) {
    var size = MediaQuery.of(context).size;
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          AnimatedContainer(
            //每当变化的时候都会有两秒的动画:包括颜色,宽高慢慢改变等等
            width: 50,
            height: 50,
            color: Colors.black.withOpacity(.2),
            duration: Duration(seconds: 2), //这是一个必传参数,持续时间两秒
            child: Center(
              //但是他的子组件并不会有动画效果
              child: Text(
                "w",
                style: TextStyle(color: Colors.black),
              ),
            ),
          )
        ],
      ),
    );
  }
}

他的子组件不会有动画效果，因为这个盒子只能监听到自己的变化，

child下面的组件都有各自有各自的管理方式，Container其实是不知道child下面是什么的

所以他的自组件是不会有动画的