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
          )
        ),
      ),
    );
  }
}

输出：

圆形头像

叠加对话框