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

user_12955702 0
Viewed 826

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?

flutter-image flutter
2 Answers

You can use a dialog.

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

user_55039560

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