Flutter中如何实现点击图片后可放大缩放查看的功能

实现思路 #

给现有缩略图添加点击手势，点击后唤起全屏预览层，通过SDK自带的InteractiveViewer组件实现手势缩放、平移交互，无需引入第三方依赖。

具体实现步骤 #

1. 改造原有缩略图代码，添加点击事件 #

你原有的代码中，给Image.file外层套上GestureDetector组件，点击时触发全屏预览逻辑：

Column(
  children: [
    image11 != null
        ? GestureDetector(
            onTap: () {
              // 点击后跳转全屏预览页
              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) => ImagePreviewPage(imageFile: image11!),
                ),
              );
            },
            child: Image.file(
              image11,
              width: 50,
              height: 50,
              fit: BoxFit.cover,
            ),
          )
        : const Text("  Bagian Belakang"),
    Container(
      margin: const EdgeInsets.fromLTRB(14, 5, 0, 0),
      child: RaisedButton(
        padding: const EdgeInsets.all(10),
        onPressed: () {
          pickImage11(ImageSource.camera);
        },
        child: const Icon(Icons.camera),
      ),
    ),
  ],
)

2. 编写全屏预览页面 #

新建ImagePreviewPage组件，用InteractiveViewer包裹图片实现缩放能力，可自定义最小/最大缩放比例：

class ImagePreviewPage extends StatelessWidget {
  final File imageFile;
  const ImagePreviewPage({super.key, required this.imageFile});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      appBar: AppBar(
        backgroundColor: Colors.transparent,
        elevation: 0,
        leading: IconButton(
          icon: const Icon(Icons.close, color: Colors.white),
          onPressed: () => Navigator.pop(context),
        ),
      ),
      body: Center(
        child: InteractiveViewer(
          minScale: 0.8, // 最小缩放比例
          maxScale: 5.0, // 最大缩放比例
          child: Image.file(imageFile),
        ),
      ),
    );
  }
}

可选简化方案：用Dialog弹出预览 #

如果不想跳转新页面，也可以把预览内容放在全屏Dialog里弹出，逻辑和上面的页面实现基本一致，把跳转逻辑替换为showDialog即可。

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