Add Swipe support between navbar pages

[bebaoboy]

• This PR supports #42

• Feature:

• bool swipeable: set to true to opt-in and be able to swipe horizontally. Default set to false

• Rect swipeableLeftArea and Rect swipeableRightArea: define the areas on the left and right side of the screen where we can swipe back and forth between tabs. Default values for each area is 50 pixels wide, about 80% screen height (similar to the code below):

  NavbarRouter(
  swipeable: swipeable,
  swipeableLeftArea: Rect.fromLTWH(
    0, 50, 50, MediaQuery.of(context).size.height * 0.9),
  swipeableRightArea: Rect.fromLTWH(
    MediaQuery.of(context).size.width - 50,
    50,
    50,
    MediaQuery.of(context).size.height * 0.8),
  destinations: [..],
  ...
  );

• Support mobile and (maybe) desktop too.

• Demo video

• The two blue bars indicate the area to swipe between pages, we can only swipe to the next/previous page from there. (In production, these bars will not be visible).

• The horizontal swipe does not hinder other scrollables on the screen (notice the horizontal list, and the slider)

• Video:

Portrait	Landscape

• Pre-launch Checklist

• [x] I read the Contributor Guide and followed the process outlined there for submitting PRs.

• [x] I listed at least one issue that this PR fixes in the description above.

• [x] I updated/added relevant documentation (doc comments with ///).

• [x] I added new tests to check the change I am making, or this PR is [test-exempt].

• [x] All existing and new tests are passing using flutter test

If you need help, consider pinging the maintainer @maheshmnj

[maheshj01]

@bebaoboy Whenever you are ready mark this PR as ready for review and I will take a look and feel free to ping me anytime if you woud like to discuss anything

[bebaoboy]

Im ready for review 😁

[maheshj01]

@bebaoboy I have added my comments let me know what you think?

[bebaoboy]

The idea is not using page view 'cause the content behind pageview cannot be scroll horizontally. Then why not make the PageView NeverScrollable? If I do that, why should I use PageView in the first place if I cannot swipe it🤣 Besides, the PageView and ListView ScrollController are similar so drag logic will be the same.

This is the PR for the design I think of, the idea is using 2 Gesture Detector on the 2 edges on the screen to help user scroll through the pages. No horizontal scrollables will be affected.

Maybe I skimmed too fast through the client spec and missed the point, or the originally said design was too abstract for me. If you don't want to use this design then leave it and maybe make another PR.

[maheshj01]

@bebaoboy Do you think you will be able to make that change to land this PR? I think its just that there will be one draggable area, I don't think its a major change in your code.

Just remove one of the Rect and handle these three methods to detect left or right swipe

onHorizontalDragStart: (details) {
    onDragStart(details);
  },
  onHorizontalDragUpdate: (details) {
    onDragUpdate(details);
  },
  onHorizontalDragEnd: (details) {
    onDragEnd(details);
  },

[bebaoboy]

Maybe I'll try that.

[maheshj01]

Let me know if you have any further questions, I would be happy to discuss.

[maheshj01]

Hi @bebaoboy, Let me know whenever this is ready for review, No rush take your time, let me know if you have any questions.

Best Mahesh

[bebaoboy]

I think its ready for review @maheshj01

[maheshj01]

Great, I will take a look at it this weekeend.