jonaswanke / swipeable_page_route

🔙 Swipe to navigate back and admire beautifully morphing widgets

🔙 Swipe to navigate back and admire beautifully morphing widgets.

SwipeablePageRoute

SwipeablePageRoute is a specialized CupertinoPageRoute that allows your users to go back by swiping anywhere on the current page. Use it instead of MaterialPageRoute or CupertinoPageRoute:

Navigator.of(context).push(SwipeablePageRoute(
  builder: (BuildContext context) => MyPageContent(),
));

If your page contains horizontally scrollable content, you can limit SwipeablePageRoute to only react on drags from the start (left in LTR, right in RTL) screen edge — just like CupertinoPageRoute:

Navigator.of(context).push(SwipeablePageRoute(
  onlySwipeFromEdge: true,
  builder: (BuildContext context) => MyHorizontallyScrollablePageContent(),
));

You can get the SwipeablePageRoute wrapping your current page using context.getSwipeablePageRoute<T>().

To use swipeable pages with a PageTransitionsTheme, use SwipeablePageTransitionsBuilder.

⚠️ SwipeablePageTransitionsBuilder must be set for TargetPlatform.iOS. For all other platforms, you can decide whether you want to use it. This is because PageTransitionsTheme uses the builder for iOS whenever a pop gesture is in progress.

Usage with Go Router

To use swipeable pages with Flutter's Go Router, use SwipeablePage and the pageBuilder parameter in GoRoute instead of builder:

// Before, without swipeable pages:
GoRoute(
  builder: (context, state) => const MyScreen(),
  // ...
)

// After, with swipeable pages:
GoRoute(
  pageBuilder: (context, state) => SwipeablePage(
    builder: (context) => MyScreen(),
  ),
  // ...
)

MorphingAppBar & MorphingSliverAppBar

As you can see in the demo above, there's a beautiful animation happening to the AppBar. That's a MorphingAppBar!

You can construct MorphingAppBar (corresponds to AppBar) and MorphingSliverAppBar (corresponds to SliverAppBar) just like the originals:

MorphingAppBar(
  backgroundColor: Colors.green,
  title: Text('My Page'),
  actions: [
    IconButton(
      key: ValueKey('play'),
      icon: Icon(Icons.play_arrow),
      onPressed: () {},
    ),
    IconButton(
      key: ValueKey('favorite'),
      icon: Icon(Icons.favorite),
      onPressed: () {},
    ),
    PopupMenuButton<void>(
      key: ValueKey('overflow'),
      itemBuilder: (context) => [
        PopupMenuItem<void>(child: Text('Overflow action 1')),
        PopupMenuItem<void>(child: Text('Overflow action 2')),
      ],
    ),
  ],
  bottom: TabBar(tabs: [
    Tab(text: 'Tab 1'),
    Tab(text: 'Tab 2'),
    Tab(text: 'Tab 3'),
  ]),
)

Both MorphingAppBars internally use Heros, so if you're not navigating directly inside a MaterialApp, you have to add a HeroController to your Navigator:

Navigator(
  observers: [HeroController()],
  onGenerateRoute: // ...
)

To animate additions, removals, and constants in your AppBars actions, we compare them using Widget.canUpdate(Widget old, Widget new). It compares Widgets based on their type and key, so it's recommended to give every action Widget a key (that you reuse across pages) for correct animations.

swipeable_page_route's Issues

Swipe from anywhere with floating effect on scene

Thank you for building this package, I really like this package so much ❤️

That would be great if we could make add a fluid effect like Instagram to make the next screen floating on the current screen.
See the right image below:

185425212_825227601706167_6056033808350539092_n.mp4

Reference: article

Thank you again 🚀

Flickering bug

Manual dragging makes some weird flickering bug appear. I tested in 2 devices, same bug. However, the bug was not appearing on the emulator.

WhatsApp.Video.2022-05-30.at.7.40.23.AM.mp4

Environment:

• OS version: Oneplus 5t Android 10
• Flutter version: 3.0
• Package version: 0.2.6

I am getting error on 'flutter pub get'

Running "flutter pub get" in counter_app...
Because every version of flutter_test from sdk depends on test_api 0.2.19-nullsafety.2 which depends on async >=2.5.0-nullsafety <2.5.0, every version of flutter_test from sdk requires async >=2.5.0-nullsafety <2.5.0.

And because every version of swipeable_page_route depends on list_diff ^1.3.0 which depends on async >=2.2.0 <2.5.0, flutter_test from sdk is incompatible with swipeable_page_route.

So, because counter_app depends on both swipeable_page_route ^0.1.4 and flutter_test any from sdk, version solving failed.
pub get failed (1; So, because counter_app depends on both swipeable_page_route ^0.1.4 and flutter_test any from sdk, version solving failed.)
exit code 1

It goes back twice on Android

When using the swipeable_page_route package in Flutter and having Android navigation gestures enabled, there is an unexpected behavior where the back action is triggered twice. This behavior occurs inconsistently and seems to be related to conflicts between the custom swipe gestures and the Android system's navigation gestures.

Option to remove shadow in page transition

First of all, thank you for the awesome package. It works great, but there is something I want to add. This package extends the CupertinoPageRoute class and CupertinoPageRoute adds a strong shadow to the page transition.

It doesn't look good when your app bar has a background color with opacity. It would be good to have an option to disable it. Or, maybe change it to a slightly visible and widely spreading shadow similar to native iOS apps.

[FR] Add reverse transition duration

Override and expose the reverseTransitionDuration to have a separate duration for opening and closing.

Tab Bar is not working with swipeable_page_route

It is conflict with TabBar&TabBarView

It is conflict with TabBar&TabBarView。
It is conflict with ListView( scrollDirection : Axis.horizontal)。

Swipe to return Previous page

Hey Jonas,
First of all Thank you for this cool plugin.
I want you add the swipe right to return previous page that we will pop from as my client wants.

Can you please reply ASAP, if it is possible of not.

Thank you.

Option to disable swiping

Page I made uses SlidingUpPanel and SwipeablePageRoute, but I don't want to be able to swipe both panel and page route. Is there a way to disable page swiping? I forked the repository and I will try to implement it, but I am not that good with flutter.

Animated title does not use styles or color from appbar

Describe the bug

When animating transition, inside of animation builder there is AnimatedTitle class that does not take style from app bard configuration, and it uses textStyle heading 6 color during transition. Making title to appear with wrong style and color during transition.

To reproduce just set in AppBarTheme or on MorphingAppBar foreground color to anything but default.

Environment:

• OS version:
• Flutter version:
• Package version:

Time of disposal after swipe depends on where it is released

Hi!

First of all, great work with this package!

I have experienced that the disposal has a long delay before being disposed which seems to be related to where it was released on the x-axis. The typical use case is that the user will swipe to dismiss it, but if they are too fast trying to opening another page nothing happens (since it has not been disposed yet).

I tried to demonstrate it here: https://vimeo.com/517835528

As seen in the video it is first released near to the right => it gets disposed immediately according to the log.
The second time the page is swiped and released far to the left => according to the log it gets disposed with a delay after it has disappeared.

Best regards

Update to Flutter 3.22.0

this issue after updating to flutter 3.22.0
the function that was being used to check the gesture if its in progress or not

CupertinoRouteTransitionMixin.isPopGestureInProgress(route)

for me I was able to fix this by replacing it with
route.navigator!.userGestureInProgress

v0.2.1 does not swipe from left

Upgrading to v0.2.1 stopped the left swiping of pages to work. Using v0.1.6 with no other changes it works like a charm,

Only thing I changed (besides the version) was to go from onlySwipeFromEdge: true to canOnlySwipeFromEdge: true

Flutter doctor:
[✓] Flutter (Channel stable, 2.0.1, on Mac OS X 10.15.5 19F101 darwin-x64, locale en-NZ)
[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
[✓] Xcode - develop for iOS and macOS
[✓] Chrome - develop for the web
[✓] Android Studio (version 3.5)
[✓] VS Code (version 1.54.1)
[✓] Connected device (2 available)

Flutter 3.0 TabbarView can not support swipe to back in Android.

Describe the bug

After upgrading Flutter 3.0, on Android models, pages with TabbarView no longer support right swipe to return。

Environment:

• OS version: Galaxy S20---Android 12
• Flutter version: 3.0.4
• Package version: latest version

Add "scrolledUnderElevation" to adapt to Material3

Flutter: Latest channel 3.19.5
Package version: swipeable_page_route 0.4.2

Please add this parameter to MorphingAppBar: "scrolledUnderElevation" to control the appbar's color when scrolling a listview? Picture of the effect below! Thank you so much!

Link preview

question: Is this trying to imitate how ios works ?

If it is does Flutter core have this anyway ?

flutter/flutter#57202

https://pub.dev/packages/cupertino_will_pop_scope

Receiving a value back from a pop.

I replaced MaterialPageRoute with SwipeablePageRoute, but it looks like I lost the capability of receiving a value back from the pop. This is my push:

Navigator.of(context).push(SwipeablePageRoute(
  builder: (BuildContext context) => DetailView(pieceId: pieceId),
)).then((value) {
  if (value == 'update') {
    setState(() {}); // This will rebuild your Home View
  }
});

This is my pop:

  Navigator.pop(context, 'update');

Is this a feature that could be added? I will take a look at your code and see if I can provide a solution.

Flutter v1.22.0 Error

Hi I updated to the new flutter version and your plugin has some dependencies issues I am getting the following error.

And because every version of swipeable_page_route depends on list_diff ^1.3.0 which depends on async >=2.2.0 <2.5.0, flutter_test from sdk is incompatible with swipeable_page_route.
So, because zaa depends on both swipeable_page_route ^0.1.4 and flutter_test any from sdk, version solving failed.

Environment:

• Device: Emulator
• OS version: Android 10
• Package version: flutter 1.22.0

How does SwipeablePageRoute work with go_router?

SwipeablePageRoute is so easy to use and convenient, i like use it in flutter so much

but how can it be combined with GoRoute?

I've been experimenting for a whole day and haven't found a good solution.

Do you have any suggestions to solve this ? @JonasWanke

thank you so much ~

Hello, please update dependencies for flutter 3.10

Hello, please update dependencies, required black_hole_flutter for flutter 3.10

feature request: make canOnlySwipeFromEdge non-final

Can you also ensure that canOnlySwipeFromEdge is not final? So that it can be changed dynamically as well?

It would create a better UX when using in combination with TabBarView, so that when you swipe from edge, it goes back, otherwise it swipes inside the TabBarView.

Related: #8

Is there a callback like `WillPop` that detects and allows swipeback?

Thank you for great package.

Is there a callback like WillPop that detects and allows swipeback?

If not, I would like to receive any information that would be helpful for forking.

When the body uses SingleChildScrollView cannot slide normally and return

Describe the bug
This is my page structure

  @override
  Widget build(BuildContext context) {
    return PublicScaffold(
      appbar: SimpleAppbar('Currencies'),
      body: SingleChildScrollView(
        child: Column(
          children: [_list()],
        ),
      ),
      empty: currents.isEmpty,
      loading: loadingState,
    );
  }

use

context.navigator.push<T>(SwipeablePageRoute(builder: (_)=>widget,canOnlySwipeFromEdge: true))

can not work

Environment:

• Device: any
• OS version: android and ios
• Package version: 0.2.3

Named Navigator

Hi buddy, is there any way to use this package for named navigation?
Or use like this:

MaterialApp(
        theme: ThemeData(
          pageTransitionsTheme: const PageTransitionsTheme(builders: {
            TargetPlatform.iOS: SwipablePageTransitionsBuilder(),
            TargetPlatform.android: SwipablePageTransitionsBuilder(),
          }
)

assert opaque error on latest version of flutter

flutter channel - master

Typed Go_Router?

I can't figure out from the documentation how to update this typed Go_Router route:

@immutable
class DiscoverRoute extends GoRouteData {
@OverRide
Widget build(BuildContext context, GoRouterState state) {
return DiscoverPage();
}
}

Using SwipablePageRoute doesn't return a widget, so I'm trying to figure out what I need to do here. It would be really helpful if the documentation covered this case.

Thanks!

Build failing with Flutter 3.13.9

Describe the bug
Unable to run the app with the package on Flutter 3.13.7. This and 3.13.9 are the only versions I tested the package on and it is failing with the following error on flutter run

../../Pub/Cache/hosted/pub.dev/swipeable_page_route-0.4.1/lib/src/page_route.dart:60:3: Error: The superclass, 'CupertinoPageRoute', has no unnamed constructor that takes no arguments.
  SwipeablePageRoute({
  ^^^^^^^^^^^^^^^^^^

Environment:

• OS version: NA
• Flutter version: 3.13.7
• Package version: 0.4.1

How to have parallax effect for the first page

I tested and realize that we can only have parallax effect (by default) from 2nd page => 3rd page => ...
Can I have parallax effect form 1st page => 2nd page?
Thank you for your help!

Issue with back button gesture on Nokia (maybe bug maybe feature)

Hi. First of all thanks to your work. Plugin is awesome.
But I noticed some issue which leads to poor user experience.

I have Android Nokia phone, which does not have back button, instead it uses swipes from the edge of screen to navigate back.
So when I want for example to go back and try to swipe from left to right and start swiping close to the left screen edge, builtin Nokia swipe detection activates and this plugin also begin to swipe.

And this leads to double back and application closes. I think the solution here is will be to specify how far from edge the swipe must begin to activate navigation.

Porosal

Something like that can help

return SwipeablePageRoute(
    builder: (context) => SomePageWIdget(),
    canOnlySwipeFromEdge: true,
    backGestureDetectionWidth: 150,
    minEdgeOffset: 50 // imaginary param
);

This gives some imaginary vertical line which starts at 50 from left, have width of 100 and ends at 150 from left.
And this will prevent simultaneous activation of builtin back button and this plugin.