flutter - flutter :将照片或图像显示为模式弹出窗口

Question

我正在尝试找到一种解决方案，可以在抖动类型的模态对话框中显示出来，例如屏幕上的覆盖小部件。

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

谢谢!

Answer 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