Flutter：将照片或图像显示为模态弹出窗口答案

【问题标题】：Flutter: display photo or image as modal popupFlutter：将照片或图像显示为模态弹出窗口
【发布时间】：2020-05-19 16:59:15
【问题描述】：

我正在尝试找到一种解决方案，以在出现颤动的模态对话框中出现，例如屏幕上的叠加小部件。

用例：我有一张显示为小圆圈头像图像的用户照片。如果用户点击照片，“弹出窗口”将覆盖屏幕，允许用户查看完整尺寸的照片。例如使用包“photo_view 包”。知道如何解决这个问题吗？我无法将 photo_view 小部件直接添加到脚手架，因为它会永久覆盖屏幕。我只有在点击迷你图标时才需要它。

谢谢！

【问题讨论】：

标签： flutter dart

【解决方案1】：

您可以使用Dialog、Gesture Detector 或InkWell 来获取onTap 功能。这是一个例子：

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Image Popup example')
        ),
        backgroundColor: Colors.grey[800],
        body: CircleAvatar(
          child: GestureDetector(
            onTap: () async {
              await showDialog(
                context: context,
                builder: (_) => ImageDialog()
              );
            },
          ),
          radius: 50.0,
          //Photo by Tamas Tuzes-Katai on Unsplash
          backgroundImage: AssetImage('assets/tamas.jpg')
        )
    );
  }
}

class ImageDialog extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Dialog(
      child: Container(
        width: 200,
        height: 200,
        decoration: BoxDecoration(
          image: DecorationImage(
            image: ExactAssetImage('assets/tamas.jpg'),
            fit: BoxFit.cover
          )
        ),
      ),
    );
  }
}

输出：

Circle Avatar

Overlay Dialog

【讨论】：

创建一个类而不是一个简单的小部件有什么好处？通常我会在需要额外的功能和小部件时创建一个类，但我可能错了
在这种特殊情况下没有任何优势，因为我们只使用了一次并且不传递任何参数或其他任何东西。