Flutter中点击缩略图无法唤起全屏图片问题求助

核心原因 #

你直接调用OpenImage(...).build(context)只是构建了Widget实例，但没有通过Flutter的导航系统将其推入导航栈，所以全屏图片页面并未被加载显示。

解决步骤 #

1. 修正点击事件的导航逻辑 #

将原来直接调用build方法的代码，替换为使用Navigator.push来触发页面跳转：

Ink.image(
  image: AssetImage('assets/images/${channelPostModel.image}'),
  height: 200,
  fit: BoxFit.fitWidth,
  child: InkWell(
    onTap: () {
      Navigator.push(
        context,
        MaterialPageRoute(
          builder: (context) => OpenImage(
            imageAddress: 'assets/images/${channelPostModel.image}',
          ),
        ),
      );
    },
  ),
)

2. 优化全屏图片页面的可用性（可选） #

当前OpenImage页面没有返回入口，用户无法回到原页面，建议添加返回逻辑，同时优化显示效果：

class OpenImage extends StatelessWidget {
  const OpenImage({super.key, required this.imageAddress});
  final String imageAddress;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      // 添加带返回按钮的AppBar
      appBar: AppBar(
        backgroundColor: Colors.black.withOpacity(0.7),
        iconTheme: const IconThemeData(color: Colors.white),
        elevation: 0,
      ),
      // 点击空白区域也可返回
      body: GestureDetector(
        onTap: () => Navigator.pop(context),
        child: Center(
          child: Image.asset(
            imageAddress,
            fit: BoxFit.contain, // 保持原图比例，避免裁剪
          ),
        ),
      ),
    );
  }
}

3. 确认资源配置正确性（排查项） #

虽然你已确认图片地址正确，但仍需确保pubspec.yaml中已正确配置assets路径：

flutter:
  assets:
    - assets/images/

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