import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Animated Container')),
        body: AnimatedContainerExample(),
      ),
    );
  }
}

class AnimatedContainerExample extends StatefulWidget {
  @override
  _AnimatedContainerExampleState createState() => _AnimatedContainerExampleState();
}

class _AnimatedContainerExampleState extends State<AnimatedContainerExample> {
  double _height = 100.0;

  void _toggleHeight() {
    setState(() {
      _height = _height == 100.0 ? 200.0 : 100.0; // 切换高度
    });
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          AnimatedContainer(
            duration: Duration(seconds: 1), // 动画持续时间
            height: _height,
            width: 100,
            color: Colors.blue,
            curve: Curves.easeInOut, // 动画曲线
          ),
          SizedBox(height: 20),
          ElevatedButton(
            onPressed: _toggleHeight,
            child: Text('Toggle Height'),
          ),
        ],
      ),
    );
  }
}

代码说明：
AnimatedContainer: 这个小部件会自动为你提供一个动画效果，当它的属性（在这里是 height）发生变化时。

duration: 设置动画的持续时间，这里设置为 1 秒。

curve: 你可以设置动画的曲线效果，例如 Curves.easeInOut 使得动画在开始和结束时都比较平滑。

_toggleHeight 方法: 点击按钮会调用这个方法，切换 _height 的值，并触发动画。

使用方法：
将上述代码复制到你的 Flutter 项目中并运行，点击按钮即可看到容器的高度在 100 和 200 之间变化的动画效果。