Flutter双视图模糊效果问题：返回原视图后无法取消模糊

问题根源 #

你当前的代码中，点击Preview后先跳转页面再设置blur=true，且没有在从PDF预览页返回时重置blur状态，导致返回后模糊效果持续存在。

解决方案 #

利用Navigator.push返回的Future特性：当用户从第二个页面返回时，该Future会完成，此时我们可以重置blur为false。调整异步逻辑顺序即可解决：

• 先设置blur=true显示模糊效果
• 跳转至PDF预览页，等待用户返回
• 用户返回后立即设置blur=false取消模糊

修改后的代码片段 #

onTap: () async {
  // 先开启模糊效果
  setState(() {
    blur = true;
  });
  
  // 跳转页面并等待用户返回
  await Navigator.push(
    context, 
    MaterialPageRoute(builder: (context) => Display_Image_From_Storage(
      pathSelectedImage: url,
      imageIndex: 0,
      fileName: currentFile,
    ))
  );
  
  // 用户返回后关闭模糊
  setState(() {
    blur = false;
  });
}

额外优化 #

在页面的leading关闭按钮中，也建议添加重置blur的逻辑，避免用户点击关闭时模糊效果残留：

leading: InkWell(
  child: const Icon(Icons.close),
  onTap: () {
    setState(() {
      blur = false;
    });
    Navigator.of(context).pop();
  }
),

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