Not working with CustomScrollView

[czaku]

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?

[Tkko]

Hi @czaku, not a bug, just not implemented yet.

[czaku]

Thanks, anything that you are planning to release anytime soon? Asking for a friend :P

[Tkko]

Thanks, anything that you are planning to release anytime soon? Asking for a friend :P

Honestly, I tried implementing it before but didn't manage to finish it, I need some kind of help and more free time :D

[czaku]

Thanks, I don’t think I am good enough in Dart and Flutter yet, but might give it a try! Thanks, Lukasz Czak Mobile: +44 7895547572

…

On 26 Apr 2022, 09:37 +0100, Tornike ***@***.***>, wrote: > Thanks, anything that you are planning to release anytime soon? Asking for a friend :P Honestly, I tried implementing it before but didn't manage to finish it, I need some kind of help and more free time :D — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.Message ID: ***@***.***>

[azharul-islam]

Trying to implement App Store like dismiss feature that has a full page scrollview. This is the ONLY library that achieves something close. This scrollview dismiss feature is holding it back. Hope you get to finish it 🥺

[Tkko]

Hang on guys, almost there

wfe.mov

[aytunch]

@Tkko this looks just BEAUTIFUL :)
Please add it to the example folder also when it is finished.
Looking forward to it :D

[aytunch]

@Tkko hi, sorry if I am bothering :/
When can we expect this to be merged?
Thanks.

[Tkko]

@Tkko hi, sorry if I am bothering :/ When can we expect this to be merged? Thanks.

I have to test it for a few days, but before that 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)

Few thing no to handle from my side, depending on the ScrollPhysics the behavior is different and I'm not sure what to do about that

Android (ClampingScrollPhysics)	iOS (BouncingScrollPhysics)
Screen.Recording.2022-10-10.at.9.41.36.PM.mov	Screen.Recording.2022-10-10.at.9.42.50.PM.mov

[aytunch]

@Tkko the video you posted 7 days ago in the above comments show no artifacts. Was that using NoScrollPhysics? Maybe that should be the suggested way to implement this functionality?

[Tkko]

@Tkko the video you posted 7 days ago in the above comments show no artifacts. Was that using NoScrollPhysics? Maybe that should be the suggested way to implement this functionality?

Sadly, It was ClampingScrollPhysics, scrolling up behavior was the same. All in all, the current functionality is good enough but not ideal

[Tkko]

Looks like the modal_bottom_sheet has same behavior

[Ciock]

I made BouncingScrollPhysics works with stretchy_header

Stretchy_headers.mov

DismissiblePage(
  direction: DismissiblePageDismissDirection.down,
  onDismissed: RoutesService.to.doBack,
  child: StretchyHeader.listView(
        headerData: HeaderData(
          blurContent: false,
          headerHeight: Get.width / NibRatioDimension.squareLike.value,
          header: Hero(
            tag: space?.id,
            child: _SpaceCoverImage(
              space: controller.space!,
              height: Get.width / NibRatioDimension.squareLike.value,
            ),
          ),
        ),
        children: [ /* children below image */ ],
      ),
    ),
  ),
);

[Tkko]

Guys, It's finally merged, checkout it on pub, and tell me if anything goes wrong.
From my experience, it's pretty stable, but I advice you (or your QA) to spent some time on testing the feature.

Version 1.0.0

[aytunch]

@Tkko thank you very much.
In the live demo, if you change the type to multi and try to dismiss a page, it glitches. Can you confirm?
The dismissing starts from the end of the screen

[Tkko]

@aytunch Correct, seems like multi directional drag doesn't work well on Web desktop.

Platform	Standard thumb drag	Mouse wheel
iOS	✅	➖
Android	✅	➖
Web Mobile	✅	➖
Web Desktop	✅ - Except multi direction	❌
Mac os	✅ - Except multi direction	❌
Linux	Can't test on mac os	Can't test on mac os
Windows	Can't test on mac os	Can't test on mac os

If anyone can test the behavior on Windows and Linux, it would be much appreciated ❤️

[Rogue85]

@Tkko hi, sorry if I am bothering :/ When can we expect this to be merged? Thanks.

I have to test it for a few days, but before that 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)

Few thing no to handle from my side, depending on the ScrollPhysics the behavior is different and I'm not sure what to do about that

Android (ClampingScrollPhysics) iOS (BouncingScrollPhysics)
Screen.Recording.2022-10-10.at.9.41.36.PM.mov

Screen.Recording.2022-10-10.at.9.42.50.PM.mov

Do you have any ideas on how to avoid scrolling during dismissal animation?

[Tkko]

Hey @Rogue85 I'm not sure how to fix it.

[Rogue85]

I was able to achieve this with SnapshotWidget. It's not the best solution, but I haven't found another one.

[astubenbord]

@Rogue85 Maybe check out https://pub.dev/packages/flutter_top_blocked_bouncing_scroll_physics, it basically prevents over-scrolling on top while applying the typical bouncing physics on bottom.

@Tkko: My question is actually the other way around. Is there any way to prevent the DismissiblePage to fire while still scrolling? The behaviour that I'm currently experiencing is that when scrolling down and then up again (mid scroll), DismissiblePage tends to start the dismissing animation although the scroll view has not yet returned to its initial offset.

See here:

Screen.Recording.2023-06-20.at.17.53.51.mov

In the video I let go of the pointer, but it also occurs when keeping the finger/mouse on the screen, i.e. one fluid up then down.

Here's the code from the video above:

import 'package:dismissible_page/dismissible_page.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("My App"),
      ),
      body: Center(
        child: ElevatedButton(
          child: Text("Open"),
          onPressed: () => context.pushTransparentRoute(
            DismissiblePage(
              direction: DismissiblePageDismissDirection.down,
              child: Scaffold(
                body: CustomScrollView(
                  physics: BouncingScrollPhysics(),
                  slivers: [
                    SliverAppBar(
                      title: Text("Scrollable dismissible page"),
                    ),
                    SliverList.builder(
                      itemCount: 30,
                      itemBuilder: (context, index) => ListTile(
                        title: Text("Item $index"),
                      ),
                    )
                  ],
                ),
              ),
              onDismissed: Navigator.of(context).pop,
            ),
          ),
        ),
      ),
    );
  }
}

It might be related to the BouncingScrollPhysics, I cannot reproduce this with ClampingScrollPhysics.

Is there any way to ensure that the dismissible page only starts dismissing when the scroll view is actually at the top? I've already tried attaching listeners to the scroll controller of the scroll view which based on the current offset disables the dismissible page through a local state variable. However, that didn't seem to work well and felt very clunky.

[Tkko]

Hey @astubenbord, what happens in the video is that when you scroll up, over scroll event is fired which calls onStart method and when you scroll down DismissiblePage is being dismissed. In short, it looks like a bug. Let me fix it

[Tkko]

@astubenbord Can you depend on master branch and verify if the issue is fixed?

  dismissible_page:
    git:
      url: https://github.com/Tkko/Flutter_dismissible_page
      ref: master

[astubenbord]

Wow, that was quick, thanks! Will test and report back on thursday if that's fine with you?

[astubenbord]

@Tkko First of all sorry for the late reply. The above problem does not occur anymore, thanks a lot! However, when starting the dismissal and then scrolling back up, the page stays in that "dismiss state" instead of first scrolling the whole page back up again before scrolling the inner page content.

See below:

Screen.Recording.2023-06-26.at.09.19.49.mov