How to show an image preview on top of an existing page in flutter?

Question

I'm building a flutter application in which I have a profile page. On the profile page, users have a profile picture. When the users click on the profile picture, I want to show a preview of the image on the same page. I don't want to navigate to another page. How can I achieve this in flutter?

Solution 1

You can use a dialog.

It’ll be shown on top of currently opened page.

Solution 2

This is what is used. Dialog works perfectly fine but Hero animation doesn't work with that, so instead, this approach worked for me.

Navigator.of(context).push(
                            PageRouteBuilder(
                              opaque: true,
                              barrierDismissible: false,
                              pageBuilder: (BuildContext context, _, __) {
                                return Scaffold(
                                  body: SafeArea(
                                    child: Column(
                                      mainAxisAlignment:
                                          MainAxisAlignment.center,
                                      children: <Widget>[
                                        Align(
                                          alignment: Alignment.topRight,
                                          child: IconButton(
                                              onPressed: () =>
                                                  Navigator.of(context).pop(),
                                              icon: const Icon(
                                                  Icons.cancel_sharp)),
                                        ),
                                        Expanded(
                                          child: InteractiveViewer(
                                            scaleEnabled: true,
                                            panEnabled: true,
                                            child: Hero(
                                              tag: user.photoUrl,
                                              child: Center(
                                                child: CachedNetworkImage(
                                                  imageUrl: user.photoUrl,
                                                  placeholder: (context, url) =>
                                                      const CupertinoActivityIndicator(),
                                                ),
                                              ),
                                            ),
                                          ),
                                        ),
                                      ],
                                    ),
                                  ),
                                );
                              },
                            ),
                          );

Comments

[Gaurav Raj]

I tried that. Works perfectly fine but I also wanted to have the hero animation so I found an alternative method since the Hero widget wasn't working with dialog. It's kind of like having another page on top using the PageRouteBuilder. I'm adding it in the comment for anyone's reference. If I didn't have the hero widget in place, dialog works perfectly.