Flutter路由跳转前水波纹动画未完成，返回后续播问题求助

原因说明 #

这不是操作错误，也不算框架Bug，是Flutter路由切换机制导致的：当通过Navigator.push跳转到新路由时，原页面的Widget会被置为offstage（不在前台显示），此时页面上的动画会被暂停，直到返回原页面、Widget回到前台，动画才会继续执行完毕，所以会出现返回时水波纹突然完成的突兀效果。

保留Ripple效果的解决办法 #

方案1：延迟执行导航，给动画留足完成时间

利用Future.delayed预留默认Ripple动画的时长（约200ms），再执行路由跳转：

ElevatedButton(
  onPressed: () async {
    await Future.delayed(const Duration(milliseconds: 200));
    Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => const OtherScreen()),
    );
  },
  child: const Text('Foo'),
)

方案2：自定义InkWell手动终止动画

用InkWell替代按钮默认点击效果，通过GlobalKey主动结束水波纹动画：

final inkKey = GlobalKey<InkResponseState>();

// ...

InkWell(
  key: inkKey,
  onTap: () {
    inkKey.currentState?.stopAnimation();
    Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => const OtherScreen()),
    );
  },
  child: Container(
    padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
    decoration: BoxDecoration(
      color: Theme.of(context).colorScheme.primary,
      borderRadius: BorderRadius.circular(8),
    ),
    child: const Text(
      'Foo',
      style: TextStyle(color: Colors.white),
    ),
  ),
)

方案3：用Hero动画优化过渡衔接

给按钮添加Hero动画，让路由过渡与Ripple动画更自然地衔接，弱化突兀感：

// 原页面按钮
ElevatedButton(
  onPressed: () {
    Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => const OtherScreen()),
    );
  },
  child: const Hero(
    tag: 'button-transition-tag',
    child: Text('Foo'),
  ),
)

// OtherScreen对应位置
Scaffold(
  appBar: AppBar(title: const Text('Other')),
  body: Center(
    child: Hero(
      tag: 'button-transition-tag',
      child: const Text('Foo'),
    ),
  ),
)

补充 #

你提到2021年的项目无此问题，是因为Flutter后续版本优化了路由切换时的Widget生命周期管理，offstage状态下的动画暂停逻辑更严格，才出现了这个体验差异。

内容的提问来源于stack exchange，提问作者Jesse R