Flutter animation (1)Animated

Using Animated is very simple, some components can add Animated in front, such as: Container, Icon, etc.

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

His subcomponents will not have animation effects, because this box can only monitor its own changes,

The components under the child have their own management methods, and the Container actually does not know what is under the child

So his self-component will not have animation