AnimatedContainer()

AnimatedContainer() 위젯은 Container() 위젯에 animation 기능이 추가된 위젯이라 생각하면 된다

Container() 위젯에 필수 argument로 duration 속성이 추가 되있음

curve 속성은 flutter reference에 자세하게 나옴

  body: Column(
        children: [
          const SizedBox(height: 12),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              AnimatedContainer(
                duration: const Duration(
                  milliseconds: 2000,
                ),
                width: widthValue,
                height: heightValue,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(12),
                  color: Colors.teal,
                ),
              ),
              InkWell(
                  onTap: () {
                    setState(() {
                      widthValue = 200;
                      heightValue = 80;
                      value == false ? value = true : value = false;
                    });
                  },
                  child: const Text('CLICK')),
            ],
          ),
          const SizedBox(height: 12),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              AnimatedContainer(
                duration: const Duration(
                  milliseconds: 2000,
                ),
                curve: Curves.easeIn,
                width: value ? 100 : 150,
                height: value ? 70 : 100,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(value ? 30 : 12),
                  color: value ? Colors.lightBlue : Colors.deepPurple,
                ),
              ),
            ],
          ),
          const SizedBox(height: 12),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              AnimatedContainer(
                duration: const Duration(
                  milliseconds: 2000,
                ),
                curve: Curves.decelerate,
                width: value ? 300 : 250,
                height: value ? 50 : 80,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.only(
                    topLeft: Radius.circular(value ? 0 : 50),
                    topRight: Radius.circular(value ? 0 : 50),
                    bottomLeft: Radius.circular(!value ? 0 : 50),
                    bottomRight: Radius.circular(!value ? 0 : 50),
                  ),
                  color: value ? Colors.deepOrange : Colors.black,
                ),
              ),
            ],
          ),
          const SizedBox(height: 12),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              AnimatedContainer(
                duration: const Duration(
                  milliseconds: 2000,
                ),
                curve: Curves.fastLinearToSlowEaseIn,
                width: value ? 200 : 150,
                height: value ? 50 : 100,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(value ? 0 : 20),
                      bottomRight: Radius.circular(value ? 0 : 50)),
                  color: value ? Colors.amber : Colors.red,
                ),
              ),
            ],
          ),
        ],
      ),

appBar action을 누르게 되면 값을 리셋 시킨다

AnimatedContainer() 위젯을 width, height 값으로도 변경할 수 있고 boolean value로 변경가능함

value ? 50 : 100 
// 위 아래 결과는 같음
if(value){
	value = false;
}

class _VelogWidgetAnimatedContainerState
    extends State<VelogWidgetAnimatedContainer> {
  double widthValue = 100;
  double heightValue = 50;
  bool value = false;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.white,
        title: const Text('Animated Container'),
        actions: [
          InkWell(
            onTap: () {
              setState(() {
                widthValue = 100;
                heightValue = 50;
              });
            },

Example