Fix exception when panelBuilder ScrollController attached to multiple views & SafeArea on iPhones

[tneotia]

Situation:

• Exception:
  I have a TabBar inside my SlidingUpPanel's panelBuilder with 2 tabs, each with their own CustomScrollView.
  I was using the ScrollController of the panelBuilder on each CustomScrollView, but I would always get this error repeatedly when switching tabs:

ScrollController attached to multiple scroll views.

This PR has fixed the exception and, as far as I can tell, maintains the original functionality. I tested the example app as well as my app and the scrolling behavior works like normal. Feel free to update this PR if a specific use case is broken because of this, testing will definitely be necessary.

• SafeArea:
  I was having issues with elements on the screen expanding past the safe area and thus not being visible. Don't know how this will affect the example app, so it needs to be tested.

[BazinC]

Hi @tneotia ,
I'm glad to meet someone who use SlidingUpPanel + panelBuilder + Tabs :)
Could you please show me how you handled the 2 directions swipe conflict ?
I have an issue, when the list in a tab is scrolled to the top, if I want to swipe horizontally to another tab, the vertical slide is triggered. It's too sensitive and leads to bad UX.

Repo to reproduce here: https://github.com/BazinC/sliding_up_panel_with_tab

[tneotia]

Could you please show me how you handled the 2 directions swipe conflict ?
I have an issue, when the list in a tab is scrolled to the top, if I want to swipe horizontally to another tab, the vertical slide is triggered. It's too sensitive and leads to bad UX.

Yeah, I saw this but after trying a lot of different things with GestureDetectors I couldn't find a way to fix this. I guess this issue is happening because the TabBar and the SlidingUpPanel cannot talk to each other. The panel isn't expecting a horizontal swipe, so any form of vertical motion is detected (even though the horizontal swipe should be detected by TabBar and ignored by the panel).
I suggest you try this out on a physical device, on the iOS emulator I can get this bad UX to happen every time but on a physical device, if you are a little bit careful with the swipes you wouldn't notice it. It still isn't the best by any stretch of the imagination, though.

[tneotia]

Update: I gave it another look for fun and I seemed to have solved it (on your use case at least - doesn't seem to be working on mine). Basically the way it works is:

1. Calculate initial swipe direction based on the dx and dy of the swipe movement
2. If direction is vertical, set shouldSlide to true, or if the direction is horizontal, set shouldSlide to false
3. The onPointerMove method runs many times during the swipe so only run the gesture funtion to slide the panel if shouldSlide is true.
   Basically this means that you could start swiping horizontally and then curve your swipe so it ends vertically, but the panel will not slide because your initial swipe was horizontal.
4. Once the swipe is finished, if shouldSlide is true, run the panel flinging function (based on swipe velocity). If shouldSwipe is false, set it to true until the next swipe detection starts again and repeats the process.

I feel like there will be issues with this, can you check the commit out and see how it works on the emulator?

Edit:
I think I got it working for my use case as well with a new commit I'm about to push. It seems that when swiping left/right to change tabs, the panel will not slide down (which is what we want) but when sliding down the panel, the user could still end up changing tabs (which is not what we want). A step in the right direction, though.

[BazinC]

Hey @tneotia , I've just tested, and your last commit fixes the issue! :)
Thanks a lot 🙌

[BazinC]

@tneotia You should remove SafeArea you've added.
People may want to keep the panel starting from the bottom of the screen.
Adding ViewPadding should be handled outside of the package, by providing SafeArea to panel/panelBuilder.

[tneotia]

@BazinC I didn't remove it entirely with the above commit but added an option for it (applySafeArea - default value false). I was having an issue within the panel where elements were getting cut off by the notch and curves of the device if my app was rotated in landscape mode, and applying SafeArea to the panelBuilder widgets didn't fix it for some reason. To fix it I had to change the plugin's functionality.

Can you try this out and see if it produces the expected functionality? I don't have access to my mac right now otherwise I would have :)

[AppetiteTeam]

Situation:

• Exception:
  I have a TabBar inside my SlidingUpPanel's panelBuilder with 2 tabs, each with their own CustomScrollView.
  I was using the ScrollController of the panelBuilder on each CustomScrollView, but I would always get this error repeatedly when switching tabs:

ScrollController attached to multiple scroll views.

Same problem 🙄
scrollController from panelBuilder attached to 3 listViews, so i gotted error:
_AssertionError ('package:flutter/src/widgets/scroll_controller.dart': Failed assertion: line 109 pos 12: '_positions.length == 1': ScrollController attached to multiple scroll views.)

Help 😭

[AppetiteTeam]

Please help me solve this problem. 😔

[alanlanglois]

I'm also using tabBar in my app and this bug is annoying.
Any plan to merge this PR, or adapt it to fix it?

[fabcall]

Any progress on this?