Flutter实现点击行内图片显示大图的方法

直接给图片添加点击交互，点击后弹出全屏预览的大图即可，修改后的代码如下：

修改后的图片构建函数 #

_buildSetMenuItemImage() {
  final url = Outlet().baseUrl + "/images/${widget.menuItem.imageUrl}";
  // 用GestureDetector包裹图片，仅给图片添加点击事件
  return GestureDetector(
    onTap: () => _showFullScreenImage(url),
    child: ClipRRect(
      child: Image.network(
        url,
        fit: BoxFit.cover,
        width: 100,
        height: 100,
      ),
    ),
  );
}

添加大图预览方法 #

在当前组件的State类中新增以下方法：

void _showFullScreenImage(String imageUrl) {
  showDialog(
    context: context,
    builder: (context) => Dialog(
      backgroundColor: Colors.transparent,
      // 点击大图任意位置关闭预览
      child: GestureDetector(
        onTap: () => Navigator.pop(context),
        // 支持手势缩放图片
        child: InteractiveViewer(
          child: Image.network(
            imageUrl,
            fit: BoxFit.contain,
          ),
        ),
      ),
    ),
  );
}

可选优化：沉浸式全屏预览 #

如果需要更彻底的全屏体验，可以替换成页面跳转的方式：

void _navigateToFullScreenImage(String imageUrl) {
  Navigator.push(
    context,
    MaterialPageRoute(
      builder: (context) => Scaffold(
        backgroundColor: Colors.black,
        body: GestureDetector(
          onTap: () => Navigator.pop(context),
          child: Center(
            child: InteractiveViewer(
              child: Image.network(
                imageUrl,
                fit: BoxFit.contain,
              ),
            ),
          ),
        ),
      ),
    ),
  );
}

此时只需把GestureDetector的onTap改为() => _navigateToFullScreenImage(url)即可。

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