Flutter: display photo or image as modal popup

Question

I'm trying to find a solution to have in flutter kind of modal dialog coming up, like an overlay widget over the screen.

Use case: I have a user photo shown as small circle avatar image. If the user taps on the photo, a "popup" shall overlay the screen allowing the user to see the full size photo. For example with the package "photo_view package". Any idea how to solve this? I cannot add the photo_view widget directly to the scaffold as it would permanently overlay the screen. I need it only when tapping on the mini icon.

Thanks!

Answer 1

You can use Dialog, and Gesture Detector or InkWell to get onTap function. Here's an example:

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

Output:

Circle Avatar

Overlay Dialog