Background color is black when enabled and transparent when disabled

[mark8044]

I'm trying to use this to build an image viewer similar to twitter. So I put an InteractiveViewer() inside of it.

class MyImageViewer extends StatefulWidget {
  MyImageViewer({Key? key, required this.image}) : super(key: key);
  String image;

  @override
  _MyImageViewerState createState() => _MyImageViewerState();
}

class _MyImageViewerState extends State<MyImageViewer> {

  @override
  Widget build(BuildContext context) {

    return DismissiblePage(
        onDismiss: () => Navigator.of(context).pop(),
        isFullScreen: true,
        child:
        InteractiveViewer(
          child:
          Container(
            alignment: Alignment.center,
            decoration: BoxDecoration(
              image:
              DecorationImage(
                image:
                CachedNetworkImageProvider(widget.image),
                fit: BoxFit.contain,
              ),
            ),
          ),
        )
    );

  }
}

Now it looks great and dismisses wonderfully.

The problem is that if you zoom on the image and then naturally try to pan the image it will also dismiss the image as is expected behavior.

So I've tried to build a system that will set the disabled flag anytime the image is zoom as follows:

class _MyImageViewerState extends State<MyImageViewer> {

  final _transformationController = TransformationController();
  bool _dismissDisabled = false;

  void _onInteractionEnd(ScaleEndDetails details) {
    setState(() {});
  }

  void _onInteractionUpdate(ScaleUpdateDetails details) {
    debugPrint(details.scale.toString());
    if (details.scale > 1)
      {
        _dismissDisabled = true;

      }
    else
      {
        _dismissDisabled = false;
      }
  }

  @override
  Widget build(BuildContext context) {

    return DismissiblePage(
        backgroundColor: Colors.black,
        onDismiss: () => Navigator.of(context).pop(),
        isFullScreen: false,
        disabled: _dismissDisabled,
        child:
        GestureDetector(
          child: InteractiveViewer(
            onInteractionEnd: _onInteractionEnd,
            onInteractionUpdate: _onInteractionUpdate,
            transformationController: _transformationController,
            panEnabled: true,
            scaleEnabled: true,
            child:
            Container(
              alignment: Alignment.center,
              decoration: BoxDecoration(
                image:
                DecorationImage(
                  image:
                  CachedNetworkImageProvider(widget.image),
                  fit: BoxFit.contain,
                ),
              ),
            ),
          ),
        )
    );

  }
}

When I do this however, the screen has a black background, which then goes to transparent when the disabled flag is set using the setState()

is this a bug or am I doing this wrong?

[Tkko]

Fixed in version 0.6.4.