Add Swipe support between navbar pages #55

bebaoboy · 2024-07-16T16:46:44Z

This PR supports Add horizontal Swipe gesture to change tabs #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
451863553_7879930308750028_6837724918374055852_n.mp4	451586683_8583293638352793_8226882859992401935_n.mp4

Pre-launch Checklist
I read the Contributor Guide and followed the process outlined there for submitting PRs.
I listed at least one issue that this PR fixes in the description above.
I updated/added relevant documentation (doc comments with ///).
I added new tests to check the change I am making, or this PR is [test-exempt].
All existing and new tests are passing using flutter test

If you need help, consider pinging the maintainer @maheshmnj

PR

maheshj01 · 2024-07-17T03:19:36Z

@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 · 2024-07-19T16:27:56Z

Im ready for review 😁

example/lib/main.dart

lib/src/navbar_router.dart

maheshj01 · 2024-07-25T15:38:53Z

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

bebaoboy · 2024-07-26T01:18:47Z

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 · 2024-07-27T14:13:10Z

@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 · 2024-07-28T05:27:03Z

Maybe I'll try that.

maheshj01 · 2024-07-28T18:18:45Z

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

- only one swipeable area - refractor some code to gestures.dart

maheshj01 · 2024-08-18T15:55:18Z

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 · 2024-08-19T11:55:53Z

I think its ready for review @maheshj01

maheshj01 · 2024-08-22T19:11:33Z

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

maheshj01 · 2024-08-25T20:32:47Z

test/navbar_router_test.dart

@@ -1793,4 +1795,103 @@ void main() {
    await tester.pumpAndSettle();
    expect((navItems[2].selectedIcon as Icon).color, Colors.green);
  });
+
+  group('Swipeable extra test', () {
+    testWidgets('Should not be able to drag on center', (WidgetTester tester) async {


By default the draggable area should take the width of available view including center,

maheshj01 · 2024-08-25T20:32:51Z

lib/src/navbar_swipeable_utls.dart

+const double kDragAreaTop = 50;
+const double kDragAreaWidth = 50;
+const double kOpacityWhenSwipeable = 0.5;
+const double kDragAreaHeightFactor = 0.8;


These should be hardcoded to default constants of the visible viewport dimensions

The Defaults should be
kDragAreaTop = 0
kDragAreaWidth = NavbarRouter pages content width

I would suggest taking a look at the Whatsapp for Android and you can see how the entire view can be scrolled

I still don't get it 😂 then what's the point of not using PageView in the first place? I mean... I feel like this PR has strayed too far from my original idea

maheshj01 · 2024-08-25T20:45:50Z

lib/src/navbar_router.dart

+                    child: GestureDetector(
+                      key: const ObjectKey("swipe-left"),
+                      behavior: HitTestBehavior.translucent,
+                      onHorizontalDragStart: (details) {


create separate methods out of the build method handleDragStart,handleDragUpdate, and handleDragEnd and move this logic there and move as much logic as possible in the corresponding methods of Gesture class to keep the build method clean and readable

maheshj01 · 2024-08-25T20:52:12Z

lib/src/navbar_router.dart

+                        controller: pageGesture.pageController,
+                        itemBuilder: (context, i) {
+                          // use keep-alive to prevent list builder to rebuild
+                          return KeepAliveWrapper(


When we horizontally swipe the widget should be visible even if the drag did not complete, currently I see a blank white screen until the drag completes

for instance if you are on index 0 and make start dragLeft and drag lets say 60% without leaving your touch on the screen, I see the tab on index 2 has not yet rendered or visible it should always be visible as you start scrolling.

To better understand this I highly recommend trying out the swipe gesture on Whatsapp app for Android.

I did, and I recommend you to take a look at the demo video and see it had been implemented in the first place before you told me to refractor the code somehow.

maheshj01 · 2024-08-25T20:54:44Z

example/lib/main.dart

+          // 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.9),


remove this comment and add

Suggested change

// 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.9),

swipeableArea: Rect.fromLTWH(0, 0, MediaQuery.of(context).size.width,

Even without specifying swipeableArea whole width should be swipeable

maheshj01

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

bebaoboy added 2 commits July 16, 2024 20:49

first commit

5b62253

finish base feature

e41ae50

bebaoboy marked this pull request as draft July 16, 2024 16:46

bebaoboy added 2 commits July 17, 2024 08:21

Merge branch 'issue-42-swipe' into main

6ff7e3d

Merge pull request #1 from bebaoboy/main

1116ba7

PR

bebaoboy added 4 commits July 17, 2024 11:28

add variables to control swipe + update example app

f358ec4

added tests

2b93618

make docs more clear

4652402

fix landscape mode

7953798

bebaoboy marked this pull request as ready for review July 19, 2024 16:26

maheshj01 reviewed Jul 25, 2024

View reviewed changes

example/lib/main.dart Outdated Show resolved Hide resolved

maheshj01 reviewed Jul 25, 2024

View reviewed changes

lib/src/navbar_router.dart Show resolved Hide resolved

maheshj01 reviewed Jul 25, 2024

View reviewed changes

bebaoboy changed the title ~~[WIP] Add Swipe support between navbar pages~~ Add Swipe support between navbar pages Jul 25, 2024

bebaoboy added 2 commits August 17, 2024 00:01

update as requested:

f55c3e1

- only one swipeable area - refractor some code to gestures.dart

minor fix

34a1131

Merge branch 'main' into issue-42-swipe

74066a9

maheshj01 reviewed Aug 25, 2024

View reviewed changes

maheshj01 requested changes Aug 25, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add Swipe support between navbar pages #55

Add Swipe support between navbar pages #55

bebaoboy commented Jul 16, 2024 •

edited

Loading

maheshj01 commented Jul 17, 2024 •

edited

Loading

bebaoboy commented Jul 19, 2024

maheshj01 commented Jul 25, 2024

bebaoboy commented Jul 26, 2024

maheshj01 commented Jul 27, 2024 •

edited

Loading

bebaoboy commented Jul 28, 2024

maheshj01 commented Jul 28, 2024

maheshj01 commented Aug 18, 2024

bebaoboy commented Aug 19, 2024

maheshj01 commented Aug 22, 2024

maheshj01 Aug 25, 2024

maheshj01 Aug 25, 2024

maheshj01 Aug 25, 2024

bebaoboy Aug 26, 2024

maheshj01 Aug 25, 2024

maheshj01 Aug 25, 2024

bebaoboy Aug 26, 2024

maheshj01 Aug 25, 2024

maheshj01 left a comment

Add Swipe support between navbar pages #55

Are you sure you want to change the base?

Add Swipe support between navbar pages #55

Conversation

bebaoboy commented Jul 16, 2024 • edited Loading

This PR supports Add horizontal Swipe gesture to change tabs #42

Feature:

Demo video

Pre-launch Checklist

maheshj01 commented Jul 17, 2024 • edited Loading

bebaoboy commented Jul 19, 2024

maheshj01 commented Jul 25, 2024

bebaoboy commented Jul 26, 2024

maheshj01 commented Jul 27, 2024 • edited Loading

bebaoboy commented Jul 28, 2024

maheshj01 commented Jul 28, 2024

maheshj01 commented Aug 18, 2024

bebaoboy commented Aug 19, 2024

maheshj01 commented Aug 22, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

maheshj01 left a comment

Choose a reason for hiding this comment

bebaoboy commented Jul 16, 2024 •

edited

Loading

maheshj01 commented Jul 17, 2024 •

edited

Loading

maheshj01 commented Jul 27, 2024 •

edited

Loading