Flutter实现点击图片弹出放大显示功能的方法

嘿，我来帮你搞定这个图片点击放大的需求！你想要的就是那种点击小图后弹出全屏大图、还能缩放查看的效果对吧？咱们有两种常用方案，给你详细说说：

方案一：使用photo_view包（推荐，快速省力） #

这个第三方包专门用来做图片预览，自带缩放、拖拽、过渡动画，完全符合你要的谷歌图片那种效果，步骤超简单：

• 第一步：在你的pubspec.yaml里添加依赖（可以去pub.dev查最新版本号）：

dependencies:
  photo_view: ^0.14.0

• 第二步：修改你现有的代码，把小图容器包在GestureDetector里，点击时跳转到带PhotoView的页面：

children: <Widget>[
  GestureDetector(
    // 监听点击事件
    onTap: () {
      Navigator.push(
        context,
        MaterialPageRoute(
          builder: (context) => Scaffold(
            backgroundColor: Colors.black,
            appBar: AppBar(
              backgroundColor: Colors.black,
              iconTheme: IconThemeData(color: Colors.white),
            ),
            body: Center(
              child: PhotoView(
                // 传入和小图一样的图片源
                imageProvider: NetworkImage(
                  "https://i.pinimg.com/originals/d4/05/f9/d405f9671b3dd8e365dd97e50e801f86.jpg"
                ),
                // 最小缩放比例（默认适应屏幕）
                minScale: PhotoViewComputedScale.contained,
                // 最大缩放比例（这里设为覆盖屏幕的2倍）
                maxScale: PhotoViewComputedScale.covered * 2,
              ),
            ),
          ),
        ),
      );
    },
    // 你原来的小图容器代码
    child: Container(
      margin: EdgeInsets.only(top: 8, bottom: 8, right: 12),
      width: 80,
      decoration: BoxDecoration(
        image: DecorationImage(
          image: NetworkImage(
            "https://i.pinimg.com/originals/d4/05/f9/d405f9671b3dd8e365dd97e50e801f86.jpg"
          ),
          fit: BoxFit.cover
        ),
        color: Colors.red,
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.1),
            blurRadius: 2,
            spreadRadius: 1
          )
        ],
        borderRadius: BorderRadius.circular(4)
      ),
    ),
  ),
]

方案二：自定义弹窗实现（不用第三方包） #

如果你不想依赖第三方库，也可以自己用Flutter原生组件实现，核心是用InteractiveViewer做缩放，Dialog做弹窗：

children: <Widget>[
  GestureDetector(
    onTap: () {
      showDialog(
        context: context,
        // 弹窗背景半透明
        barrierColor: Colors.black.withOpacity(0.8),
        builder: (context) => Dialog(
          backgroundColor: Colors.transparent,
          // 去掉默认的边距，让图片占满屏幕
          insetPadding: EdgeInsets.zero,
          child: GestureDetector(
            // 点击图片区域关闭弹窗
            onTap: () => Navigator.pop(context),
            child: InteractiveViewer(
              // 允许缩放和拖拽
              panEnabled: true,
              scaleEnabled: true,
              maxScale: 3.0,
              child: Image.network(
                "https://i.pinimg.com/originals/d4/05/f9/d405f9671b3dd8e365dd97e50e801f86.jpg",
                fit: BoxFit.contain,
              ),
            ),
          ),
        ),
      );
    },
    // 你原来的小图容器代码不变
    child: Container(
      margin: EdgeInsets.only(top: 8, bottom: 8, right: 12),
      width: 80,
      decoration: BoxDecoration(
        image: DecorationImage(
          image: NetworkImage(
            "https://i.pinimg.com/originals/d4/05/f9/d405f9671b3dd8e365dd97e50e801f86.jpg"
          ),
          fit: BoxFit.cover
        ),
        color: Colors.red,
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.1),
            blurRadius: 2,
            spreadRadius: 1
          )
        ],
        borderRadius: BorderRadius.circular(4)
      ),
    ),
  ),
]

两种方案都能实现你要的效果，第一种第三方包的方案更省心，已经帮我们处理了很多手势细节和过渡动画；第二种适合不想加依赖的场景，完全原生实现。

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