返回页面后Elevated Button涟漪效果仍持续的问题求助

这个问题的核心原因是Flutter在从子页面pop回原页面时，会恢复原页面的动画状态——包括按钮未完成的涟漪效果，导致视觉上的bug。以下是几种实用的解决方法：

方法一：返回后取消页面焦点 #

按钮的涟漪效果和焦点状态绑定，返回原页面后主动取消焦点即可终止残留的涟漪动画。在Navigator.push的await之后调用FocusScope.of(context).unfocus()：

ElevatedButton(
  onPressed: () async {
    // 跳转到Screen B
    await Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => const ScreenB()),
    );
    // 返回后取消所有控件的焦点，终止按钮涟漪
    FocusScope.of(context).unfocus();
  },
  child: const Text('跳转至Screen B'),
)

方法二：自定义InkWell按钮并手动控制涟漪状态 #

如果默认按钮的焦点控制不生效，可以用InkWell自定义按钮，通过全局Key主动终止涟漪效果：

final GlobalKey<InkWellState> _inkWellKey = GlobalKey();

// 自定义按钮
InkWell(
  key: _inkWellKey,
  borderRadius: BorderRadius.circular(4),
  onTap: () async {
    await Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => const ScreenB()),
    );
    // 返回后主动释放InkWell的状态，停止涟漪
    _inkWellKey.currentState?.dispose();
  },
  child: Container(
    padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 10),
    color: Theme.of(context).primaryColor,
    child: const Text(
      '跳转至Screen B',
      style: TextStyle(color: Colors.white, fontSize: 16),
    ),
  ),
)

方法三：利用页面生命周期监听返回事件 #

在StatefulWidget的didChangeDependencies中监听页面返回事件，触发焦点重置：

@override
void didChangeDependencies() {
  super.didChangeDependencies();
  // 监听当前页面的路由pop事件
  ModalRoute.of(context)?.addScopedWillPopCallback(() async {
    // 在pop前取消焦点
    FocusScope.of(context).unfocus();
    return true;
  });
}

以上三种方法中，方法一最为简洁高效，能覆盖大多数场景；如果遇到特殊的按钮样式或状态管理需求，再考虑方法二或三。

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