如何将变量与AnimatedContainer一起使用，同时仍恢复为默认属性

AnimatedContainer 是 Flutter 框架中的一个动画容器小部件，它可以对其子小部件的位置、大小、颜色和不透明度进行动画处理。当你想要将变量与 AnimatedContainer 一起使用，并且能够在某个时刻恢复到默认属性时，你可以通过控制动画的属性和状态来实现。

以下是一个简单的例子，展示了如何使用变量来控制 AnimatedContainer 的宽度，并在按钮点击时恢复到默认宽度：

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('AnimatedContainer Example')),
        body: Center(child: AnimatedContainerExample()),
      ),
    );
  }
}

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

class _AnimatedContainerExampleState extends State<AnimatedContainerExample> with SingleTickerProviderStateMixin {
  double _containerWidth = 100.0; // 默认宽度
  double _targetWidth = 200.0; // 目标宽度
  AnimationController _controller;
  Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: Duration(seconds: 1),
    )..addListener(() {
        setState(() {
          _containerWidth = _animation.value;
        });
      });
    _animation = Tween<double>(begin: _containerWidth, end: _targetWidth).animate(_controller);
  }

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

  void _changeWidth() {
    if (_containerWidth == _targetWidth) {
      // 如果当前宽度是目标宽度，则恢复到默认宽度
      _controller.animateTo(0);
    } else {
      // 否则，动画到目标宽度
      _controller.animateTo(1);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        AnimatedContainer(
          width: _containerWidth,
          height: 100,
          color: Colors.blue,
          alignment: Alignment.center,
          child: Text('Animated Width', style: TextStyle(color: Colors.white, fontSize: 20)),
        ),
        SizedBox(height: 20),
        ElevatedButton(
          onPressed: _changeWidth,
          child: Text('Change Width'),
        ),
      ],
    );
  }
}

在这个例子中，我们创建了一个 AnimatedContainer，它的宽度会根据 _containerWidth 变量的值来改变。我们还定义了一个 _changeWidth 方法，当按钮被点击时，它会根据当前的宽度来决定是动画到目标宽度还是恢复到默认宽度。

基础概念：AnimatedContainer 是 Flutter 中的一个动画容器，它可以对其子小部件的多个属性进行动画处理。
优势：它允许开发者轻松地创建复杂的动画效果，而无需手动管理动画帧。
类型：AnimatedContainer 支持位置、大小、颜色和不透明度等属性的动画。
应用场景：适用于需要动态改变 UI 元素视觉效果的应用，如界面过渡、状态变化提示等。
遇到的问题：如果遇到 AnimatedContainer 动画不流畅或者状态恢复不正确的问题，可能是由于动画控制器 (AnimationController) 的使用不当或者状态管理不正确导致的。
解决方法：确保正确初始化和释放 AnimationController，并且在状态改变时正确更新动画的值。