We're trying to fade out the page background (which is separate from the DismissiblePage widget) when the user starts dragging, but unfortunately there's no way to get the drag progress.

It would be nice if the drag progress could be reported via a callback, ideally with a value of 0.0-1.0, indicating how much the dismissible has been dragged compared to its total width/height.

I think this happens from the fact that Colors.transparent.withOpacity(value) creates a grey shade even if the base color is transparent.

Both in Single and Multi axis transitions we need to add a condition for backgroundColor being Colors.transparent and do not add withOpacity in those cases

https://github.com/Tkko/Flutter_dismissible_page/blob/c8ddb543e3c3280641b045e5fea08c8848f210a0/lib/src/multi_axis_dismissible_page.dart#L171 https://github.com/Tkko/Flutter_dismissible_page/blob/c8ddb543e3c3280641b045e5fea08c8848f210a0/lib/src/single_axis_dismissible_page.dart#L269

Hi ! Thanks for this package it's really nice to have !

I got a problem when I try to add in the child a InteractiveViewer to be able to zoom into the widget (an image). The dismiss interaction not work anymore.

Simple example to show the problem:

class ImageZoomPage extends HookConsumerWidget {
  const ImageZoomPage({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    const imageUrl =
        'https://thumbs.dreamstime.com/b/url-text-displayed-touch-screen-modern-tablet-hands-holding-white-mobile-device-66853601.jpg';
    return DismissiblePage(
      onDismissed: () {
        context.router.pop();
      },
      direction: DismissiblePageDismissDirection.multi,
      child: Hero(
        tag: 'image',
        child: InteractiveViewer( // <-- Here the InteractiveViewer broke the DismissiblePage
          minScale: 0.1,
          maxScale: 3.0,
          clipBehavior: Clip.none,
          child: CachedNetworkImage(
            fit: BoxFit.fitWidth,
            cacheKey: imageUrl,
            imageUrl: imageUrl,
          ),
        ),
      ),
    );
  }
}

I have missing something ?

Hi, the new multi direction dismiss is a great addition and I immediately updated my app to use it. Unfortunately my code relied on the "disabled" parameter and that implementation was missing. I'm not sure if this is the best way to do it, but it worked for my use case. Thanks for this project 👍

Config files or media assets not relevant for the package functioning itself should be included in .pubignore to avoid unnecessary files get published and reduce package size.

example/media/* should be included in .pubignore

I would like to be able to make drag animation a bit faster, meaning it actually follows my finger when dragging, just like in telegram. Is it possible? If you could give me any pointers where i should look, i could change the code myself, because i need it asap. Thanks for your help.

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?

You can test the behavior by depending on the feature_branch or on the demo website (on the mobile or in the desktop with developers options opened)

Depending on the ScrollPhysics the behavior is different and I'm not sure what to do about that | Android (ClampingScrollPhysics) | iOS (BouncingScrollPhysics) | |-|-| |

Doesn't work when on top of a page that has a CustomScrollView and some slivers inside (SliverList) etc. Only dismisses sideways. If there is no scrollable content in CustomScrollView then works also in vertical. Any tips on how to approach view structure or is it a bug?

I think currently the dissmissing page only scales down and moves. Also the previous page color changes. But instead it would be nicer to fade out the top page and see the bottom page the more we dismiss the page