[BUG] The image zoomed is "under" the other widgets

[leopi99]

Describe the bug When the image is zoomed (in my case inside a listview and a container with constraints), the other widgets are visibile on top of the image.

My code:

Click to expand

ListView(
        padding: EdgeInsets.only(top: 32),
        physics: BouncingScrollPhysics(),
        shrinkWrap: true,
        children: [
          Container(
            constraints: BoxConstraints(
              maxWidth: MediaQuery.of(context).size.width,
              maxHeight: MediaQuery.of(context).size.width,
            ),
            child: PhotoView(
              controller: _photoController,
              onTapUp: (context, _, __) => _scaleStateController.reset(),
              scaleStateController: _scaleStateController,
              basePosition: Alignment.center,
              enableRotation: true,
              backgroundDecoration: BoxDecoration(color: Colors.transparent),
              heroAttributes: PhotoViewHeroAttributes(
                  tag: widget.photo.time.millisecondsSinceEpoch),
              imageProvider: isLocal(widget.photo.imageUrl)
                  ? FileImage(File(widget.photo.imageUrl))
                  : NetworkImage(
                      widget.photo.imageUrl,
                    ),
            ),
          ),
          Padding(
            padding: EdgeInsets.symmetric(horizontal: 8, vertical: 16),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Text(
                        '${AppLocalizations.of(context).photoTakenIn}${widget.photo.location}'),
                    Row(
                      children: [
                        Text('${widget.photo.likes}'),
                        IconButton(
                          icon: Icon(
                            widget.photo.liked
                                ? Icons.fiber_manual_record
                                : Icons.fiber_manual_record_outlined,
                            color: widget.photo.liked
                                ? Theme.of(context).accentColor
                                : null,
                            size: 26,
                          ),
                          onPressed: () async {
                            if (!widget.photo.liked)
                              await widget.photo.addLike(
                                  AppBlocInherited.of(context)
                                      .bloc
                                      .dbRepository);
                            else
                              await widget.photo.removeLike(
                                  AppBlocInherited.of(context)
                                      .bloc
                                      .dbRepository);
                            setState(() {});
                          },
                        ),
                      ],
                    ),
                  ],
                ),
                SizedBox(height: 8),
                Text(
                  widget.photo.description,
                  style: TextStyle(color: Colors.grey),
                ),
                if (isDev)
                  Row(
                    mainAxisAlignment: MainAxisAlignment.end,
                    children: [
                      TextButton(
                        onPressed: () async {
                          bool response = false;
                          await showTravelDialog(
                            title: AppLocalizations.of(context).removePhoto,
                            content:
                                AppLocalizations.of(context).removePhotoSure,
                            primaryButtonText: AppLocalizations.of(context).yes,
                            primaryButtonFunction: () {
                              response = true;
                              Navigator.popUntil(
                                  context,
                                  (route) =>
                                      route.settings.name ==
                                      AppRouteBuilder.HOME);
                            },
                            secondaryButtonText:
                                AppLocalizations.of(context).no,
                            secondaryButtonFunction: () => response = false,
                          );
                          if (response)
                            await AppBlocInherited.of(context)
                                .bloc
                                .removePhoto(widget.photo.dbID);
                        },
                        style: TextButton.styleFrom(
                          shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(8),
                            side: BorderSide(
                                color: Theme.of(context).accentColor, width: 2),
                          ),
                        ),
                        child: Padding(
                          padding:
                              EdgeInsets.symmetric(horizontal: 8, vertical: 4),
                          child: Text(
                            AppLocalizations.of(context)
                                .remove
                                .toString()
                                .toUpperCase(),
                            style:
                                TextStyle(color: Theme.of(context).accentColor),
                          ),
                        ),
                      ),
                    ],
                  ),
              ],
            ),
          ),
],
),

Screenshots

I'm using Flutter 2.0.3 and photo_view 0.11.1

[yasinarik]

You might wrap it with a ClipRRect widget so it will be clipped. I had the same issue.