Flutter中ScaleTap+TabBar快速切换时AnimationController dispose后调用stop报错

报错原因 #

这个错误的核心是动画控制器生命周期管理冲突：

• 快速切换Tab（尤其是三指跳页）时，TabBarView会迅速销毁（dispose）当前页面的所有Widget，包括ScaleTap组件。
• ScaleTap内部依赖AnimationController实现缩放动画，如果切换时动画还在执行中，AnimationController会随Widget一起被dispose，但动画的后续回调仍会尝试调用stop()方法，此时控制器已销毁，触发Flutter的断言检查。

修复方案 #

方案1：给页面添加状态缓存（简单快捷） #

让每个Tab页面保持状态，避免快速切换时被立即dispose。给每个Tab对应的页面组件添加AutomaticKeepAliveClientMixin：

// 封装带状态缓存的Tab页面组件
class _TabPage extends StatefulWidget {
  final Color color;
  const _TabPage(this.color);

  @override
  __TabPageState createState() => __TabPageState();
}

class __TabPageState extends State<_TabPage> with AutomaticKeepAliveClientMixin {
  @override
  bool get wantKeepAlive => true; // 开启状态缓存

  @override
  Widget build(BuildContext context) {
    super.build(context); // 必须调用此方法
    return Center(
      child: ScaleTap(
        onPressed: () {},
        child: Container(
          width: 200.0,
          height: 300.0,
          color: widget.color,
        ),
      ),
    );
  }
}

// 修改TabBarView的使用方式
TabBarView(
  children: const [
    _TabPage(Colors.red),
    _TabPage(Colors.red),
    _TabPage(Colors.red),
  ],
)

页面切换时不会被立即销毁，动画有足够时间完成，避免生命周期冲突。缺点是会占用更多内存，适合页面数量不多的场景。

方案2：封装安全版ScaleTap（从根源解决） #

自定义一个SafeScaleTap，在调用AnimationController方法前先检查是否已dispose：

class SafeScaleTap extends StatefulWidget {
  final Widget child;
  final VoidCallback? onPressed;
  final double scaleMinValue;
  final Duration duration;

  const SafeScaleTap({
    Key? key,
    required this.child,
    this.onPressed,
    this.scaleMinValue = 0.95,
    this.duration = const Duration(milliseconds: 100),
  }) : super(key: key);

  @override
  _SafeScaleTapState createState() => _SafeScaleTapState();
}

class _SafeScaleTapState extends State<SafeScaleTap> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _scaleAnimation;
  bool _isDisposed = false;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: widget.duration,
    );
    _scaleAnimation = Tween<double>(begin: 1.0, end: widget.scaleMinValue).animate(_controller);
  }

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

  Future<void> _handleTap() async {
    if (_isDisposed) return;
    await _controller.forward();
    if (_isDisposed) return;
    await _controller.reverse();
    if (_isDisposed) return;
    widget.onPressed?.call();
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTapDown: (_) => !_isDisposed ? _controller.forward() : null,
      onTapCancel: () => !_isDisposed ? _controller.reverse() : null,
      onTap: _handleTap,
      child: ScaleTransition(
        scale: _scaleAnimation,
        child: widget.child,
      ),
    );
  }
}

用这个SafeScaleTap替换原ScaleTap，每次调用动画方法前都会检查状态，避免控制器销毁后执行操作。

方案3：改用原生组件实现缩放效果 #

如果不想依赖第三方包，用InkWell配合ScaleTransition自己实现：

class ScaleButton extends StatefulWidget {
  final Widget child;
  final VoidCallback? onPressed;

  const ScaleButton({Key? key, required this.child, this.onPressed}) : super(key: key);

  @override
  _ScaleButtonState createState() => _ScaleButtonState();
}

class _ScaleButtonState extends State<ScaleButton> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _scale;
  bool _isDisposed = false;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 100),
    );
    _scale = Tween(begin: 1.0, end: 0.95).animate(_controller);
  }

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

  Future<void> _performTap() async {
    if (_isDisposed) return;
    await _controller.forward();
    if (_isDisposed) return;
    await _controller.reverse();
    if (_isDisposed) return;
    widget.onPressed?.call();
  }

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: _performTap,
      onTapDown: (_) => !_isDisposed ? _controller.forward() : null,
      onTapCancel: () => !_isDisposed ? _controller.reverse() : null,
      child: ScaleTransition(
        scale: _scale,
        child: widget.child,
      ),
    );
  }
}

原生实现更可控，避免第三方包的潜在生命周期问题。

内容的提问来源于stack exchange，提问作者David A.