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?

CodePudding user response：

You can use a dialog.

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

CodePudding user response：

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