寻求简易可行的Flutter点击小图弹出大图功能实现方案

以下是可直接运行的完整代码，实现点击缩略图弹出对应全屏大图、支持手势缩放、点击空白区域关闭预览的效果：

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '图片预览Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const ImagePreviewPage(),
    );
  }
}

class ImagePreviewPage extends StatelessWidget {
  const ImagePreviewPage({super.key});

  // 示例图片列表，可替换为自己的图片地址
  final List<String> imageList = const [
    'https://picsum.photos/200/300?random=1',
    'https://picsum.photos/200/300?random=2',
    'https://picsum.photos/200/300?random=3',
    'https://picsum.photos/200/300?random=4',
    'https://picsum.photos/200/300?random=5',
    'https://picsum.photos/200/300?random=6',
  ];

  // 展示大图的方法
  void _showLargeImage(BuildContext context, String imageUrl) {
    showDialog(
      context: context,
      barrierDismissible: true,
      builder: (BuildContext context) {
        return Dialog(
          backgroundColor: Colors.transparent,
          insetPadding: EdgeInsets.zero,
          child: GestureDetector(
            onTap: () => Navigator.pop(context),
            child: InteractiveViewer(
              minScale: 0.1,
              maxScale: 5.0,
              child: Image.network(
                imageUrl,
                fit: BoxFit.contain,
                width: double.infinity,
                height: double.infinity,
              ),
            ),
          ),
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('图片列表')),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: GridView.builder(
          gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 3,
            crossAxisSpacing: 8,
            mainAxisSpacing: 8,
          ),
          itemCount: imageList.length,
          itemBuilder: (context, index) {
            return GestureDetector(
              onTap: () => _showLargeImage(context, imageList[index]),
              child: ClipRRect(
                borderRadius: BorderRadius.circular(4),
                child: Image.network(
                  imageList[index],
                  fit: BoxFit.cover,
                ),
              ),
            );
          },
        ),
      ),
    );
  }
}

效果参考 #

核心逻辑说明 #

• 缩略图层：使用GridView构建三列布局的小图列表，每个小图绑定点击事件
• 大图预览层：通过全屏透明Dialog承载大图，使用InteractiveViewer组件实现双指缩放、拖动查看的交互
• 关闭逻辑：点击预览层任意区域即可关闭大图，也可通过系统返回键关闭

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